摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級(jí)菜單</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
a{text-decoration: none;color: #fff;}
.first{height: 30px;line-height: 30px;background: orange;text-align: center; margin-top: 10px;padding-right:15px ;}
.first li{list-style-type: none;position: relative;float: left;}
.first li a{display: block;height: 30px;width:80px;float: left;margin-left: 15px;}
.first li ul{position: absolute;display: none;}
.second{top: 30px;}
.second li a{width: 80px;background: rgba(100,50,30,0.6);}
.second li a:hover{width: 80px;background: rgba(100,50,30,0.8);}
.third{left: 80px;}
/*.first>li:hover>ul {display: block;}
.first>li:hover>ul >li:hover >ul{display: block;}*/
.nav >div{position: relative;float: left;left: 50%;}
.nav >div>ul{position: relative;float: left;left:-50%;}
</style>
</head>
<body>
<div class="nav">
<div>
<ul class='first'>
<li><a href="#">菜單一</a>
<ul class="second">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四<span>?</span></a>
<ul class="third">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜單二</a>
<ul class="second">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四<span>?</span></a>
<ul class="third">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜單三</a>
<ul class="second">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四<span>?</span></a>
<ul class="third">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
$('.first li') .hover(function(){
$(this).children('ul').toggle();
})
</script>
</div>
</div>
</body>
</html>
批改老師：查無此人批改時(shí)間：2019-05-05 10:14:12
老師總結(jié)：完成的不錯(cuò)。以后學(xué)習(xí)了php，就可以做動(dòng)態(tài)數(shù)據(jù)了。繼續(xù)加油。