多级菜单（CSS）

标签：style   blog   http   io   color   ar   os   sp   div   

CSS代码：

*{
margin:0;
padding:0;
}

/*静态网页中的导航*/
#nav{
background:#eee;
width:600px;
height:40px;
margin:0 auto; /*居中*/
}

/*一级菜单css的样式*/
ul{
list-style:none;
}
ul li{
float:left;
width:90px;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:#000;
display:block;
}
a:hover{
background:#0F6;
}

/*二级菜单css的样式*/
ul li ul li{
float:none;
background:#eee;
margin-top:2px;
}
ul li ul {
position:absolute;
top:0px;
left:0px;
display:none; /*先隐藏*/
}
ul li ul li a:hover{
background:#06C;
}
ul li:hover ul {
display:block;
position:relative;
width:80px;
}

/*三级菜单css的样式*/
ul li:hover ul li ul{                          /*当鼠标放在一级菜单时，三级菜单隐藏*/
display:none;
}
ul li ul li:hover ul{                        /*当鼠标放在二级菜单时，三级菜单显示*/
display:block;
position:absolute;
top:0px;
left:92px;
}

HTML代码：

<div id="nav">
<ul>
<li><a href="#">首页</a> </li>
<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>
<li><a href="#">温和</a></li>
</ul>
</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></li>
</ul>
</div>

多级菜单（CSS）

标签：style   blog   http   io   color   ar   os   sp   div   

原文地址：http://www.cnblogs.com/yunian/p/4101753.html