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

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

主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉

菜单效果,非常简单实用,需要的朋友可以参考下

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

这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单

目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。

运行效果截图如下：

在线演示地址如下：

<title>CSS二级下拉导航菜单</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/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 a{display:block;color:#fff;text-decoration:none;}

#nav ul li a:hover{font-weight:bold;background:#666;}

<div id="mainNavBar">

<div id="nav">

<ul>

<li>

<a href="#">添加</a>

<div id="subNav">

<a href="#">日志</a>

<a href="#">分类</a>

</div>

</li>

</li>

<li>

<a href="#">扩展</a>

<div id="subNav">

<a href="#">评论管理</a>

<a href="#">留言管理</a>

<a href="#">注销退出</a>

</div>

</li>

</ul>

this.style.fontWeight="bold";

this.style.overflow="visible";

this.style.background="#666666";

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal";