我有一个使用纯CSS的菜单,悬停父li
项显示嵌套列表。一个简化的例子:
<ul id="menu-top" >
<li class="menu-item">
<a href="http://localhost/wp5/forums/">Forums</a>
<ul class="sub-menu">
<li><a href="http://localhost/wp5/register/">Register</a></li>
<li><a href="http://localhost/wp5/activate/">Activate</a></li>
<li><a href="http://localhost/wp5/members/">Members</a></li>
</ul>
</li>
</ul>
css:
.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color
.navigation ul.sub-menu li {
display:none;
}
.navigation ul li:hover > ul.sub-menu li { display: block; }
它运作正常,但我正在尝试添加“持久”效果,我希望在将鼠标悬停在子项目时保持父样式设置。
我尝试了这个,但无法开始工作:
.navigation ul.sub-menu li:hover > .navigation ul.menu li { background: #ccc}
我不知道在没有javscript的情况下是否可行,或者找不到任何关于使用“&gt;”的内容在CSS。
感谢任何帮助
答案 0 :(得分:3)
:hover
会在正在悬停的元素的所有祖先上触发,因此.navigation ul.menu li:hover { background: #ccc; }
应该可以正常工作。
或者,有一天我们应该可以使用:has()
。
答案 1 :(得分:0)
.menu-item:hover {
background-color:#ccc;
}
.sub-menu li:hover {
background-color:#666;
}