For my Mobile navbar I have a :hover::after effect that creates a 2px height line underneath the heading when the menu heading is hovered over.

This works fine for the menu headings that don’t have a submenu working example

However, when a submenu needs to slide out below the heading, the :hover::after effect appears in the wrong place, seems to get shunted down not working example

Not sure what’s causing this, so any suggestions/pointers would be great.
Thanks in advance Garreth

**
some example HTML showing the structure**

            <nav class="nav-mobile">
                <!--<a href="index.html"><img class="mobile-logo" src="images/logo/world-war-2-logo.webp" alt="World-War-2.org Logo" title="World-War-2.org"> </a>-->
                <div class="nav-mobile-menu-links" id="mobilenavmenulinks">
                    <ul class="ul-mobile-upper-menu">
                        <li class="li-mobile-main-menu-item"><a class="a-mobile-main-menu-item" href="index.html">A World at War</a></li>
                        <li class="li-mobile-main-menu-item"><a class="a-mobile-main-menu-item" href="#">The Road to War</a></li>
                        <li class="li-mobile-main-menu-item"><a class="a-mobile-main-menu-item" href="#">Mobile Site</a></li>
                    </ul>
                    <ul class="ul-mobile-lower-menu">
                        <li class="li-mobile-main-menu-item-with-submenu">
                            <a class="a-mobile-main-menu-item-with-submenu" href="#">Eastern Europe</a>
                            <div class="mobile-sub-menu-1">
                                <ul class="ul-mobile-sub-menu-1">
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Invasion of Poland</a> </span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Winter War</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Barbarossa</a></span>
                                    </li>
                                    <li>
                                        <span class="li-mobile-sub-menu-1-item"><a class="a-mobile-sub-menu-1-item" href="#">Typhoon</a></span>
                                    </li>
                                </ul>
                            </div>
                        </li>

Snip of CSS that creates the hover effect for both the working and non working menu headings

/* Main Menu Item Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item::after {
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 191, 255);
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-mobile ul .li-mobile-main-menu-item:hover::after {
    width: 100%;
}

.nav-mobile ul .a-mobile-main-menu-item:hover {
    color: rgba(0, 191, 255);
}


/* Main Menu Item Hover Effects End */

/* Main Menu Item With Submenu Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item-with-submenu::after {
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(0, 191, 255);
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-mobile ul .li-mobile-main-menu-item-with-submenu:hover::after {
    width: 100%;
    
}

/* Main Menu Item With Submenu Hover Effects End */