Drop down menu 展开时，请在菜单下方保留行

当鼠标悬停时，我在菜单项下方有一行。 这是一个下拉菜单，当我在子菜单中悬停时，我希望保留该行

这是我的密码：

    <nav id="primary_navigation">
<h1>Primary Navigation Menu</h1>
<ul>
<li class="active"><a href="<?php echo home_url('/'); ?>">Home</a></li>
<li><a href="about-us/">About Us</a></li>
<li class="has-sub"><a href=""><span>Services</span></a>
<ul>
    <li><a href=""><span>Service 1</span></a></li>
    <li><a href=""><span>Service 2</span></a></li>
    </ul>
                </li>
                <li><a href="">Fees and Process</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact</a></li>
            </ul>               
        </nav>

谁能告诉我一个提示吗？我不知道我应该在哪里编码什么。

---

非常感谢。

我已经看透了。您已将

padding bottom

属性赋予

li a:hover

或visitored或active，但您已将子菜单嵌套在

li

元素中，那么这怎么可能呢，兄弟？在启动子菜单之前，您将结束该元素

nav#primary_navigation ul li a

，因为

<li class="has-sub"><a href=""><span>Services</span></a> [your li a ends here]
<ul>
    <li><a href=""><span>Service 1</span></a></li> [So here no hover action'll be applied] here
    <li><a href=""><span>Service 2</span></a></li>
    </ul>
</li>

反而

nav#primary_navigation ul li a:hover, nav#primary_navigation ul li a:visited{
/*style goes here*/   
}

希望您能理解。

请提供一个jsfiddle:或一个图像或更多有关问题本身的信息

nav#primary_navigation ul li:hover, nav#primary_navigation ul li:visited{
display: block;
text-align: center;
text-decoration: none;
color: black;
padding-bottom: 10px;
border-bottom: solid #000000;   
}

nav#primary_navigation ul li a:hover, nav#primary_navigation ul li a:visited{
/*style goes here*/   
}