Question

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

这是我的代码：

    <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>

这是CSS：

nav#primary_navigation h1{
display: none;
text-align: center; 
}
nav#primary_navigation {
margin-top: 15px;
margin-left: 100px;
font-family: 'Eraslght';
font-size: 18pt;
line-height: 20pt;
}
nav#primary_navigation ul {
list-style:none;

}
nav#primary_navigation ul li {
display: block;
float: left;
position: relative;
margin-left: 25px;


}
nav#primary_navigation ul li a:link, nav#primary_navigation ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
color: black;
}
/*1*/
nav#primary_navigation ul li:hover a{ 
display: block;
text-align: center;
text-decoration: none;  
color: black;

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

nav#primary_navigation ul li a:active {
display: block;
text-align: center;
text-decoration: none;
color: black;   

}
/*fin 1*/
nav#primary_navigation ul li:hover ul {
display: block;
background-color: #04E1BE;
}
nav#primary_navigation ul li ul {
margin: 0px;
list-style: none;
display: none;
position: absolute;
top: 40px;
left: -2px;
}
nav#primary_navigation ul li ul li {    
width: 100px;
clear: left;
margin-left: -5px;
margin-top: 0px;
}
nav#primary_navigation ul li ul li a:link{
clear:left;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}
nav#primary_navigation ul li ul li:hover a, nav#primary_navigation ul li ul li a:active, nav#primary_navigation ul li ul li a:hover {
clear:left;
color: white;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}

谁能告诉我一个提示？我不知道我应该在哪里编码。非常感谢。

Answer 1

正如我所看到的那样。您已将padding-bottom属性提供给li a:hover或已访问或有效，除非您已在li元素中嵌套了子菜单，那么怎么可能，兄弟？在开始子菜单nav#primary_navigation ul li a之前，您要结束该元素ul li，因为

<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: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*/   
}

希望你明白。

在展开时保持在菜单下面的行

1 个答案: