マウスオーバーでテキストアンダーラインを表示する問題

Question

私はWordPressテーマのナビゲーションメニューをカスタマイズして、マウスの上に下線付きのリンクを表示しようとしています。

サブメニュー項目を持つメニュー項目を除いて、正常に動作します。この1つ（「テストページ」と呼ばれます）では、より上の行がより上に配置され、の下にはがありません。

あなたはそれが私がこの問題を解決するにはどうすればよいhere

を生きる見ることができますか？

多くのおかげで、

は、サブメニュー項目を持っているリンクに悪いルックス：

がノーサブアイテムとのリンクのための良好なルックス：

/* Style the primary menu items */ 
#top-menu-nav > ul > li { 
    padding-right:25px; 
} 

#top-menu-nav > ul > li > a { 
    color: #000; 
font-weight: 600; 
    position:relative 
} 

#top-menu-nav > ul > li > a:after { 
    content:''; 
    position: absolute; 
    left: 50%; 
    top: 18px; 
    width: 0; 
    height: 3px; 
    background: #90BAD4; /* underline color */ 
    border-radius: 3px; 
    transition: all .3s ease-in-out; 
} 

/* Style the primary menu items on hover */ 
#top-menu-nav > ul > li > a:hover { 
    color:#00171f; 
    opacity:1; 
} 

#top-menu-nav > ul > li > a:hover:after { 
    width:100%; 
    margin-left:-50%; 
} 

/* Style the active primary menu item */ 
#top-menu > li.current-menu-item > a, 
#top-menu > li.current-menu-item > a:hover { 
    color: #90BAD4; 

} 

#top-menu > li.current-menu-item > a:after { 
    display:none; 
} 

Answer 1

このセレクタのtopプロパティです：

/* Dropdown Arrows */ 
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after { 
    position: absolute; 
    top: 0; /* This one */ 
    right: 0; 
    font-family: "ETmodules"; 
    font-size: 16px; 
    font-weight: 800; 
    content: "3"; 
}