html css js实现二级菜单,JS+CSS实现简单的二级下拉导航菜单效果

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：

这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS二级下拉导航菜单

body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}

#mainNavBar{width:100%;background:#999;padding:10px 0;}

#nav{width:760px;height:30px;margin:0 auto;}

#nav ul{padding:0;margin:0;}

#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}

#nav ul li