Question

我有一个这样的垂直菜单：

<ul>
<li>Level 1 menu
    <ul>
       <li>Level 2 item</li>
       <li>Level 2 item</li>
    </ul>
</li>
<li>Level 1 menu
    <ul>
       <li>Level 2 item</li>
       <li>Level 2 item</li>
    </ul>
</li>
<li>Level 1 menu</li>
</ul>

现在我需要在悬停时显示2级物品，所以我添加了这一行

#bar  ul li:hover ul { display: block; }

在css中，但它没有任何区别，我的css中没有其他显示标记

#bar ul { list-style: none; margin: 0px; padding: 0px; }
#bar ul li { padding: 4px 0px 4px 0px; }
#bar ul li a {  color: #FFF; font-size: 16px;    }
#bar ul li a:hover { font-weight:bold }
#bar ul li ul li { padding: 4px 0px 4px 0px; margin-left:10px;}
#bar ul li ul li a { padding-left: 0px; font-size: 10px;   }

Answer 1

据我了解，您需要添加#bar ul li ul { display: none; }

这是example

Answer 2

#bar  ul li ul { display: none;}
#bar  ul li:hover ul { display: block; }

并将您的列表包装在ID为#bar

的元素中

这是demo

Answer 3

您应该尝试使用子选择器>（更快），明智地使用后代。但是5级后代选择器是过度杀伤。

基本上，首先使用单个后代选择器来影响所有这些，然后使用子项覆盖并设置第一个级别的样式。

这样的事情：

#menu { list-style: none; margin: 0px; padding: 0px; }
#menu li { padding: 4px 0px 4px 0px; margin-left:10px; }
#menu > li { padding: 4px 0px 4px 0px; margin-left:0; }
#menu a { color: #FFF; padding-left: 0px; font-size: 10px; }
#menu > li > a { font-size: 16px; }
#menu a:hover { font-weight:bold }
#menu ul { display: none; }
#menu li:hover > ul { display: block; }

Demo

如何在悬停时显示子菜单

3 个答案: