鼠標懸停上的文字下劃線問題

Question

我試圖custmomise wordpress主題的導航菜單，讓鼠標懸停在鏈接上。

它工作正常，除了有子菜單項的菜單項。對於這一個（稱爲「測試頁面」），該行被放置在以上文本中，而不是下面的是。

你可以看到它住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

The culpr它是來自此選擇器的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"; 
}