css三级下拉菜单实现方法分享
发布时间：2013-12-27 14:37:29 作者：佚名 
我要评论
我要评论css三级下拉菜单实现方法分享，大家参考使用吧
复制代码
代码如下:<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type = "text/css">
/*设置通配符样式*/
*{
margin:0;
padding:0;
}
body{
font-size:12px;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}</p> <p>/*设置二级导航样式*/
.nav {
width:500px;
height:30px;
background-color:#b4b4b4;
/*导航栏居中*/
margin:auto;
}
.nav ul li {
width:100px;
height:30px;
float:left;
position:relative;
}
.nav ul li a {
display:block;
width:96px;
border:2px solid gray;
height:26px;
line-height:26px;
text-align:center;
}
.nav ul li a:hover {
background-color:yellow;
}</p> <p>/*设置一级导航样式*/
.nav ul li ul{
display:none;
}
.nav ul li:hover ul{
display:block;
width:100px;
position:absolute;
top:30px;
left:0;
background-color:white;
}
.nav ul li:hover ul li a{
display:block;
width:96px;
height:26px;
line-height:26px;
border:2px solid gray;
text-align:center;
}
.nav ul li:hover ul li a:hover{
background-color:orange;
}</p> <p>/*设置三级导航样式*/
.nav ul li:hover ul li ul {
display:none;
}
.nav ul li:hover ul li:hover ul{
display:block;
width:100px;
position:absolute;
top:0px;
left:100px;
background-color:#b4b4b4;
}
.nav ul li:hover ul li:hover ul li {
width:100px;
height:30px;
}
.nav ul li:hover ul li:hover ul li a {
display:block;
width:96px;
height:26px;
line-height:26px;
border:2px solid gray;
text-align:center;
}
.nav ul li:hover ul li:hover ul li a:hover {
background-color:#00CC00;
}
.nav ul li:hover ul .nav_jw ul {
display:none;
}
.nav ul li:hover ul .nav_jw:hover ul{
display:block;
width:100px;
position:absolute;
top:0px;
left:-100px;
background-color:#b4b4b4;
}
.nav ul li:hover ul .nav_jw:hover ul li {
width:100px;
height:30px;
}
.nav ul li:hover ul .nav_jw:hover ul li a {
display:block;
width:96px;
height:26px;
line-height:26px;
border:2px solid gray;
text-align:center;
}
.nav ul li:hover ul .nav_jw:hover ul li a:hover {
background-color:#00CC00;
}</p> <p></style>
</head>
<body>
<div class = "nav">
<ul>
<li><a href = "#">一级导航</a>
<ul>
<li><a href = "#">二级导航</a>
<ul>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
</ul>
</li>
<li><a href = "#">二级导航</a>
<ul>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
</ul>
</li>
<li><a href = "#">二级导航</a>
<ul>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
</ul>
</li>
</ul>
</li>
<li><a href = "#">一级导航</a>
<ul>
<li><a href = "#">二级导航</a></li>
<li><a href = "#">二级导航</a></li>
<li><a href = "#">二级导航</a></li>
</ul>
</li>
<li><a href = "#">一级导航</a>
<ul>
<li><a href = "#">二级导航</a></li>
<li><a href = "#">二级导航</a></li>
<li><a href = "#">二级导航</a></li>
</ul>
</li>
<li><a href = "#">一级导航</a>
<ul>
<li><a href = "#">二级导航</a></li>
<li><a href = "#">二级导航</a></li>
<li><a href = "#">二级导航</a></li>
</ul>
</li>
<li><a href = "#">一级导航</a>
<ul>
<li class="nav_jw"><a href = "#">二级导航</a>
<ul>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
</ul>
</li>
<li class="nav_jw"><a href = "#">二级导航</a>
<ul>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
</ul>
</li>
<li class="nav_jw"><a href = "#">二级导航</a>
<ul>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
<li><a href = "#">三级导航</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
相关文章
js彩色拼图导航下拉菜单是一款多彩且个性的js网站导航条2013-12-17- 大多数人会选择用JavaScript去实现下拉菜单，但其实CSS也可以做到的哦，下面为大家介绍下CSS驱动的横向下拉菜单，感兴趣的朋友不要错过2013-10-18
菜单界面典雅，下拉菜单显示效果华丽美观，略带性感2013-10-08
jQuery实现可以自动感应浏览器边界选择显示方向的多级下拉菜单效果
可以通过html代码定义多级下拉菜单，当菜单显示达到浏览器边界时，能自动选择菜单的显示方向2013-09-18
选项卡可以轻松切换，每个选项卡下方带有一个可以下拉显示的菜单，功能非常齐全2013-09-11
二级下拉菜单，菜单切换过程中下方的图片会跟着切换，并带有漂亮的过渡效果2013-09-08
jQuery模仿谷歌风格的下拉导航菜单效果可自定义二级下拉菜单
完全模版谷歌的顶部导航菜单，可以自定义二级下拉菜单2013-08-26
jQuery实现的简单下拉菜单效果，只需简单的几句代码即可实现这个下拉导航菜单效果，经测试效果还不错简单实用，没有太多花哨的东西。2013-07-29
最新评论