CSS悬停下拉问题

Question

我想知道当我仅使用 CSS 将鼠标悬停在具有更多子菜单 ID 的链接上时，是否可以显示包含在具有子菜单 ID 值的导航元素中的链接？如果是怎么办？

<nav id="main">
    <ul>    
        <li><a href="#" id="more-subs">More</a></li>        
    </ul>
</nav>


<nav id="sub-menu">
    <ul>    
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>
        <li><a href="#">sub</a></li>        
    </ul>
</nav>

Answer 1

您不能在 css 中向上移动 DOM - 只能向下移动(因此级联)。

如果您不能更改您的 html 标记，您将不得不使用 javascript 解决方案来完成这项工作。

否则，如果您可以更改您的 html，请这样做:http://jsfiddle.net/JdZUx/15/ (如果您想要多个下拉菜单，请编辑代码)

<nav id="main">
    <ul>    
        <li>
            <a href="#" id="more-subs">More</a>
            <ul class="sub-menu">    
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>        
            </ul>
        </li>        
    </ul>
</nav>

#main .sub-menu {display:none;}
#main li:hover .sub-menu {display:block;width:200px;background:#ccc;}

注意:这只是基本代码 - 如果您希望它与跨浏览器兼容，您将不得不优化并添加更多规则。还有:hover在 IE6 中仅在 <a> 上受支持元素