abstrait：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三級下拉導航</title> <style> *{margin:0;padding:0;} li{list-style: none;} li:ho
<!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樣式調(diào)整的還不是非常的漂亮，很多細節(jié)都沒有處理。實現(xiàn)這個功能最重要的就是使用display屬性和定位。
Professeur correcteur：天蓬老師Temps de correction：2019-04-12 09:14:05
Résumé du professeur：display屬性,其實應該是學習css最應該首先學的, 這是對我影響最大的一個屬性