- 在网页中我们经常会看到主菜单中会有很多二级菜单以至更多，如何实现二级，三级等子列表，下面通过一段代码来简单的实现二级列表和三级列表。
- 二级列表的实现思路如下，在鼠标未悬浮到一级列表时，使用display：none将二级列表隐藏，对一级列表使用(hover)伪类标签，当鼠标悬浮到一级列表上后，使用display:black将二级列表显示出来。
- 二级列表的位置相对于父列表进行position: relative;和position: absolute;相对定位和绝对定位来调整二级列表的位置。
- 三级，四级…列表方法同上，不一一介绍。
1.效果展示
2.HTML代码如下
<body>
<div class="wrapper">
<ul class="nav flex1">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">装修服务</a>
<ul class="subnav">
<li>
<a href="#">全案设计</a>
<ul class="innernav">
<li><a href="#">参观工地</a></li>
<li><a href="#">星级工队</a></li>
</ul>
</li>
<li>
<a href="#">别墅大宅</a>
<ul class="innernav">
<li><a href="#">热装楼盘</a></li>
<li><a href="#">参观工地</a></li>
<li><a href="#">星级工队</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">看案例</a>
</li>
<li>
<a href="#">找设计师</a>
</li>
</ul>
</div>
</body>
3.CSS代码
<style>
.nav{
width: 972px;
margin: 0 auto;
}
.nav li{
width: 108px;
height: 70px;
}
.nav li:hover >a{
color: red;
}
.nav li>a{
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height:70px;
font-size: 14px;
color: rgb(51,51,51);
}
.nav>li{
position: relative;
}
.subnav{
border: 1px solid gray;
display: none;
position: absolute;
left:0;
top:70px;
}
.nav>li:hover .subnav{
display: block;
}
.subnav li{
border-bottom: 1px dashed gray;
border-left: 2px solid #ffffff;
}
.subnav li:hover{
border-left: 2px solid #00463E;
}
.subnav>li{
position: relative;
}
.innernav{
border: 1px solid gray;
position: absolute;
left:108px;
top: 0px;
display: none;
}
.subnav li:hover .innernav{
display: block;
}
</style>
**原创文章，如要转载请备注此处！！！**
