javascript - 悬停时如何显示子菜单

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