Положение заголовков меню :hover:: после подчеркивания не в том месте ⇐ CSS

[Anonymous]

Для моей мобильной панели навигации у меня есть эффект :hover::after, который создает линию высотой 2 пикселя под заголовком, когда на заголовок меню наведен курсор.
Это отлично работает для меню. заголовки, у которых нет рабочего примера подменю
Однако, когда подменю необходимо выдвинуть под заголовок, эффект :hover::after появляется не в том месте, кажется, отключен неработающий пример
Не знаю, что является причиной этого, поэтому любые предложения/указания будут полезны.
Заранее спасибо, Гаррет
**
пример HTML, показывающий структуру**

• A World at War
• The Road to War
• Mobile Site

• Eastern Europe
  
  
  
  Invasion of Poland
• Winter War
• Barbarossa
• Typhoon

Фрагмент CSS, создающий эффект наведения как для рабочих, так и для неработающих заголовков меню.
/* 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 */


Подробнее здесь: https://stackoverflow.com/questions/786 ... rong-place