Question

有一个嵌套的LI菜单 - 我希望能够做的是在任何父LI悬停时显示所有子UL。理想情况下只是CSS？但是如果不能在CSS中使用jQuery就行了。

菜单代码为：

<ul>
<li><ahref="#">Item 1</a>
<ul>
<li><ahref="#">Sub Item 1</a></li>
<li><ahref="#">Sub Item 2</a></li>
<li><ahref="#">Sub Item 3</a></li>
</ul>
</li>
<li><ahref="#">Item 2</a>
<ul>
<li><ahref="#">Sub Item 1</a></li>
<li><ahref="#">Sub Item 2</a></li>
<li><ahref="#">Sub Item 3</a></li>
</ul>
</li>
</ul>

所以例如 - 当项目1悬停在上面时 - 项目1和项目2的子菜单UL应该显示......容易吗？我似乎无法解决这个问题.... :(

Answer 1

根据您当前的要求，<li>的悬停应该显示所有兄弟<ul>元素的<li>子元素，如果没有JavaScript（有或没有库，因为CSS缺乏选择先前在DOM中出现的元素的能力，包括祖先元素和以前的兄弟姐妹）;但是，如果您愿意允许在父<ul>元素上进行悬停，则可以通过简单的CSS实现：

ul > li {
    display: list-item;
}

li > ul {
    display: none;
}

ul:hover > li > ul {
    display: block;
}

JS Fiddle demo

在上面使用子组合子（>）意味着这将仅显示第一级<ul>元素，如果最后一条规则被修改则 all 可以显示<ul>个孩子：

ul:hover > li ul {
    display: block;
}

JS Fiddle demo

在任何父LI的悬停时显示所有子UL

1 个答案: