Question

我想知道当我将鼠标悬停在id-more-subs的链接上时，是否可以使用子菜单的id值显示nav元素中包含的链接？如果是这样的话？

<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

查看本教程，我认为它会对您有所帮助。

https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/

Answer 2

你无法在css中向上移动 - 只有向下（因此级联）。

如果您无法更改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;}

注意：这只是基本代码 - 如果您希望它与crossbrowser兼容，则必须优化并添加更多规则。 IE6中的:hover仅在<a>元素

上受支持

Answer 3

尝试使用类似的东西：

#more-subs #sub-menu{
  display: none;
}
#more-subs:hover #sub-menu{
  display: block;
}

这对你有帮助吗？

CSS悬停下拉问题

3 个答案: