关于CSS二级菜单的问题
<style>#nav{}#navul{}#navulli{}#navula:hover{}--></style><divid="nav"><ul><li><ahref=...
<style>
#nav{}
#nav ul{}
#nav ul li{}
#nav ul a:hover{}
-->
</style>
<div id="nav">
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">22222</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">44444</a></li>
<li><a href="#">55555</a></li>
<li><a href="#">66666</a></li>
<li><a href="#">77777</a></li>
<li><a href="#">88888</a></li>
<li><a href="#">99999</a></li>
</ul>
</div>
</body>
一这个样式给我写个二级下拉菜单。
二级菜单自己写我就写了一级的。
代码越简单越好。 新手难的看不懂.加JS也没关系。谢谢~！！！ 展开
#nav{}
#nav ul{}
#nav ul li{}
#nav ul a:hover{}
-->
</style>
<div id="nav">
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">22222</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">44444</a></li>
<li><a href="#">55555</a></li>
<li><a href="#">66666</a></li>
<li><a href="#">77777</a></li>
<li><a href="#">88888</a></li>
<li><a href="#">99999</a></li>
</ul>
</div>
</body>
一这个样式给我写个二级下拉菜单。
二级菜单自己写我就写了一级的。
代码越简单越好。 新手难的看不懂.加JS也没关系。谢谢~！！！ 展开
2个回答
展开全部
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉列表</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:18px;}
li{ list-style:none;}
#nav{ position:relative; width:600px; margin:0 auto 10px; height:22px;}
#nav ul{ position:absolute;}
#nav ul li{ float:left; display:inline; width:120px; height:18px; padding-top:4px; overflow:hidden; margin:0 2px; text-align:center; background:#F5F5F5; color:#990; border:1px solid #EEE8DD; cursor:pointer; }
#nav ul .nav-on{height:auto;}
#nav ul li ul{ position:static;}
#nav ul li ul li{ display:block; padding:0; margin:0; height:27px; border:none;}
#nav ul li ul li a{ display:block; height:18px; padding:5px 0 4px; color:#666; text-decoration:none;}
#nav ul li ul li a:hover{ background:#539D26; color:#fff;}
.content { background:#ccc; width:600px; height:200px; margin:0 auto; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的首页
<ul>
<li><a href="#">我爱CSS</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">社区圈子
<ul>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的短信
<ul>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">账户管理
<ul>
<li><a href="#">我爱CSS</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</li>
</ul>
</div>
<div class="content"><div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉列表</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:18px;}
li{ list-style:none;}
#nav{ position:relative; width:600px; margin:0 auto 10px; height:22px;}
#nav ul{ position:absolute;}
#nav ul li{ float:left; display:inline; width:120px; height:18px; padding-top:4px; overflow:hidden; margin:0 2px; text-align:center; background:#F5F5F5; color:#990; border:1px solid #EEE8DD; cursor:pointer; }
#nav ul .nav-on{height:auto;}
#nav ul li ul{ position:static;}
#nav ul li ul li{ display:block; padding:0; margin:0; height:27px; border:none;}
#nav ul li ul li a{ display:block; height:18px; padding:5px 0 4px; color:#666; text-decoration:none;}
#nav ul li ul li a:hover{ background:#539D26; color:#fff;}
.content { background:#ccc; width:600px; height:200px; margin:0 auto; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的首页
<ul>
<li><a href="#">我爱CSS</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">社区圈子
<ul>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的短信
<ul>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">账户管理
<ul>
<li><a href="#">我爱CSS</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</li>
</ul>
</div>
<div class="content"><div>
</body>
</html>
追问
我试了。 可二级菜单显示的不正常。
追答
我在谷歌 火狐 IE10下都是正常的，兼容性问题自己解决
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<title>CSS下拉菜单实例模块</title>
<style type="text/css">
body,ul,li{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0px; padding:0px;}
a{ color:#000000; text-decoration:none;}
body{text-align:center; }
li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold; float:left;}
.list a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px 5px 0px 5px;}
.list a:visited{color:#336601;text-decoration:none;float:left;padding:3px 5px 0px 5px;width:100px;}
.list a:hover{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#539D26;}
.list a:active{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none; background-color:#BD06B4;}
#nav{width:600px;height:30px; margin:0 auto;padding:0px 5px; text-align:center; clear:both;}
.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}
.menu1{width:120px;height:auto;margin:6px 4px 0px 0px;border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;padding:6px 0px 0px 0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;}
.menu2{width:120px;height:18px;margin:6px 4px 0px 0px;background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">一级菜单
<div class="list">
<a href="http://www.baidu.com">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.baidu.com">一级菜单</a>
<div class="list">
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="#">一级菜单</a>
<div class="list">
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="#">一级菜单</a>
<div class="list">
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
</ul>
</div>
</body>
<style type="text/css">
body,ul,li{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0px; padding:0px;}
a{ color:#000000; text-decoration:none;}
body{text-align:center; }
li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold; float:left;}
.list a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px 5px 0px 5px;}
.list a:visited{color:#336601;text-decoration:none;float:left;padding:3px 5px 0px 5px;width:100px;}
.list a:hover{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#539D26;}
.list a:active{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none; background-color:#BD06B4;}
#nav{width:600px;height:30px; margin:0 auto;padding:0px 5px; text-align:center; clear:both;}
.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}
.menu1{width:120px;height:auto;margin:6px 4px 0px 0px;border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;padding:6px 0px 0px 0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;}
.menu2{width:120px;height:18px;margin:6px 4px 0px 0px;background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">一级菜单
<div class="list">
<a href="http://www.baidu.com">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.baidu.com">一级菜单</a>
<div class="list">
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="#">一级菜单</a>
<div class="list">
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="#">一级菜单</a>
<div class="list">
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
<a href="#">二级菜单</a><br />
</div>
</li>
</ul>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
