1

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

这是我的代码：

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

谁能告诉我一个提示？我看不到我应该在哪里编码什么。非常感谢。

4

1 回答 1

0

正如我所看到的那样。您已将该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*/   
}

希望你能明白。

于 2013-04-08T20:04:34.530 回答