Question

是否可以修改以下代码以仅使用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%;
}

Answer 1

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

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

Demo Fiddle

CSS - 悬停在主菜单或子菜单上时保持子菜单可见

1 个答案: