使用css完成三级下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级下拉导航</title>
<style>
*{margin:0;padding:0;}
li{list-style: none;}
li:hover{cursor: pointer;}
.nav{width:1200px;height:40px;line-height:40px;background:#333;margin:0 auto;color:#fff;}
.first>li{float:left;width:100px;margin:0 20px;text-align: center; position:relative;}
.first>li:hover .second{display: block;}
.first span{float:left;color:#999;}
.second{position:absolute;top:40px;left:-20px;color:#000;border:1px solid #ccc;display:none;}
.second>li{border-top:1px solid #ccc; position:relative;width:100px;padding:0 20px;}
.second>li:hover .third{display: block;}
.third{position:absolute;top:0px;left:140px;color:#000;background:#ccc;width:80px;font-size: 12px;display: none;}
</style>
</head>
<body>
<div class="nav">
<ul class="first">
<li>一级导航一
<ul class="second">
<li>二级导航一
<ul class="third">
<li>三级导航一</li>
<li>三级导航二</li>
<li>三级导航三</li>
</ul>
</li>
<li>二级导航二</li>
<li>二级导航三</li>
</ul>
</li><span>|</span>
<li>一级导航二</li><span>|</span>
<li>一级导航三
<ul class="second">
<li>二级导航一
<ul class="third">
<li>三级导航一</li>
<li>三级导航二</li>
<li>三级导航三</li>
</ul>
</li>
<li>二级导航二</li>
<li>二级导航三</li>
</ul>
</li><span>|</span>
<li>一级导航四</li><span>|</span>
<li>一级导航五</li>
</ul>
</div>
</body>
</html>css样式调整的还不是非常的漂亮，很多细节都没有处理。实现这个功能最重要的就是使用display属性和定位。