0

是否可以仅使用 CSS 修改以下代码以保持这种菜单+子菜单组合的悬停状态？如果悬停主菜单或子菜单，子菜单应保持可见。现在只有主菜单悬停在工作。谢谢！

HTML + CSS 下面：

<div id="dropnav">
    <ul>
        <li id="main"><a href="#">One</a></li>
        <li id="main"><a href="#">Two</a>
            <ul>
            <li><a href="#">Two A</a></li>
            <li><a href="#">Two B</a></li>
            <li><a href="#">Two C</a></li>
            <li><a href="#">Two D</a></li>
            </ul>            
        </li>
        <li id="main"><a href="#">Three</a></li>
        <li id="main"><a href="#">Four</a></li>
        <li id="main"><a href="#">Five</a></li>
    </ul>    
</div>

#dropnav {
height:50px;
width: 100%;
text-decoration: none;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
}

#dropnav ul{
margin:0px;
padding:0px;
text-align: center;
}

#dropnav ul li{
display:inline; 
float:left; 
list-style:none; 
margin-left:auto; 
position:relative; 
height:25px; 
width: 20%;
font-size: 20px;
font-family: 'Cabin', Helvetica, Arial;
}

#dropnav ul li ul{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
z-index: 99;
top:50px;
}

#dropnav  ul li:hover > ul{
display:block;
width:500px;
left: -50%;
}

#dropnav ul li ul li:hover > a{
color:#FFFFFF;
text-decoration:none;
display:block;
width:500px;
left: -50%;
}
4

1 回答 1

0

尝试将您的子菜单样式更改为：

#dropnav ul li ul {
    margin:0px;
    padding:0px;
    display:none;
    position:relative;
    left:0px;
    z-index: 99;
    top:0px;
    padding-top: 50px;
}

演示小提琴

于 2013-09-06T19:59:30.917 回答