使用CSS的样式导航栏

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

<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的东西搞乱，但我别无选择:(

感谢所有帮助

来源

2012-01-12 user1089548

@ Elen：这是非常可能的，并且只有在CSS中很常见 – Jawad 2012-01-12 16:31:21

绝对不需要JavaScript。如果您需要更多关于css下拉菜单的信息，请阅读www.cssplay.co.uk/menus/final_drop.html – 2012-01-12 16:31:43

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

来源

2012-01-12 16:28:16 Treemonkey

真棒;）感谢您的帮助，我会在几分钟内接受它最好的答案 – user1089548 2012-01-12 16:33:16

http://jsfiddle.net/MsAta/

但它不会在每个浏览器中工作

最好是使用javascript - 有很多像这样的菜单jQuery插件

来源

2012-01-12 16:30:49 giker

使用CSS的样式导航栏

回答

相关问题