HTML二级菜单
<html lang="en">
<head>
<meta>
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#nav{background: #eee;width: 600px;height: 40px;margin: 0 auto;}
ul{list-style:none;}
ul li{float: left;line-height: 40px;text-align: center;position: relative;}
a{text-decoration: none;color: #000;display: block;padding: 0 10px;height: 40px;}
a:hover{color: #fff;background: #666;}
ul li ul li{float: none;background: #eee;margin-top: 2px;}
ul li ul{position: absolute;left: 0;top: 40px;}
ul li ul li a{width: 80px;}
ul li ul li a:hover{background: #06f;}
ul li ul{display: none;}
.yiji:hover .yincang{display: block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li class="yiji"><a href="#" class="caidan3">菜单3</a>
<ul class="yincang">
<li><a href="#">javascript</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单3</a></li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a></li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号