用css设置导航栏

Question

我需要用css设置此导航栏的样式。这是无序列表。我所拥有的是一些页面下的另一个ul，它们就像它们的子页面一样。 看起来像这样：

<ul id="nav-bar">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Menu</a>
<ul><li><a href="#">Nivo</a></li></ul>
</li>
</ul>

主要认为我不明白的是如何让Nivo（在这种情况下）仅在用户将鼠标悬停在菜单列表上时显示。这是显示这样的子页面的常见方式，但我不知道如何仅使用CSS来实现这一点。

我主要是后端开发人员，所以我讨厌搞乱css的东西，但我别无选择:(

感谢您的帮助

Answer 1

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

Answer 2

http://jsfiddle.net/MsAta/

但它不会在每个浏览器中都有效。

最好使用javascript - 有很多用于菜单的jQuery插件。