鼠标悬停

Question

我试图通过自定义wordpress主题的导航菜单，让鼠标悬停下划线。

除了具有子菜单项的菜单项外，它工作正常。对于这个（称为＆＃34;测试页面＆＃34;），该行将置于文本之上，而置于之下。

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