二级菜单

以下代码是一个完整的2级菜单代码

包括HTML和CSS部分

 

<style type="text/css">
* { margin:0; padding:0;}
ul li { list-style:none;}
a { text-decoration:none;}
.nav {
　　border:2px solid #ccc;
　　border-right:none;
　　overflow:hidden;
　　float:left;
　　margin:100px 0 0 300px;
}
.nav ul li {
　　float:left;
}
.nav ul li a {
　　width:120px;
　　height:40px;
　　text-align:center;
　　line-height:40px;
　　display:block;
　　border-right:2px solid #ccc;
　　background:#eee; color:#666;
}
.nav ul li a:hover{
　　color:#f00;
}
.nav ul li ul {
　　position:absolute;
　　display:none;
}
.nav ul li ul li {
　　float:none;
}
.nav ul li ul li a {
　　border-right:none;
　　border-top:1px dotted #ccc;
　　background:#f5f5f5;
}
.nav ul li:hover ul{
　　display:block;
}
</style>

首先建一个名叫“nav”的菜单，里面加入ul li和a标签

再加入CSS效果，去掉下划线什么的

完成以上效果之后在给每个li加上子集的ul li a

然后使用display:block; position:absolute; 
display:none;等属性把2级导航隐藏。加入hover效果

鼠标移入就会实现2级菜单

<div class="nav">
　　<ul>
　　　　<li><a href="#">导航1</a>
　　　　　　<ul>
　　　　　　　　<li><a href="#">二级导航1</a></li>
　　　　　　　　<li><a href="#">二级导航1</a></li>
　　　　　　　　<li><a href="#">二级导航1</a></li>
　　　　　　　　<li><a href="#">二级导航1</a></li>
　　　　　　</ul>
　　　　</li>
　　　　<li><a href="#">导航2</a>
　　　　　　<ul>
　　　　　　　　<li><a href="#">二级导航2</a></li>
　　　　　　　　<li><a href="#">二级导航2</a></li>
　　　　　　　　<li><a href="#">二级导航2</a></li>
　　　　　　　　<li><a href="#">二级导航2</a></li>
　　　　　　</ul>
　　　　</li>
　　　　<li><a href="#">导航3</a>
　　　　　　<ul>
　　　　　　　　<li><a href="#">二级导航3</a></li>
　　　　　　　　<li><a href="#">二级导航3</a></li>
　　　　　　　　<li><a href="#">二级导航3</a></li>
　　　　　　　　<li><a href="#">二级导航3</a></li>
　　　　　　　　<li><a href="#">二级导航3</a></li>
　　　　　　</ul>
　　　　</li>
　　</ul>
</div>