????：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三級(jí)下拉導(dǎo)航</title> <style> *{margin:0;padding:0;} li{list-style: none;} li:ho
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三級(jí)下拉導(dǎo)航</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>一級(jí)導(dǎo)航一
<ul class="second">
<li>二級(jí)導(dǎo)航一
<ul class="third">
<li>三級(jí)導(dǎo)航一</li>
<li>三級(jí)導(dǎo)航二</li>
<li>三級(jí)導(dǎo)航三</li>
</ul>
</li>
<li>二級(jí)導(dǎo)航二</li>
<li>二級(jí)導(dǎo)航三</li>
</ul>
</li><span>|</span>
<li>一級(jí)導(dǎo)航二</li><span>|</span>
<li>一級(jí)導(dǎo)航三
<ul class="second">
<li>二級(jí)導(dǎo)航一
<ul class="third">
<li>三級(jí)導(dǎo)航一</li>
<li>三級(jí)導(dǎo)航二</li>
<li>三級(jí)導(dǎo)航三</li>
</ul>
</li>
<li>二級(jí)導(dǎo)航二</li>
<li>二級(jí)導(dǎo)航三</li>
</ul>
</li><span>|</span>
<li>一級(jí)導(dǎo)航四</li><span>|</span>
<li>一級(jí)導(dǎo)航五</li>
</ul>
</div>
</body>
</html>css樣式調(diào)整的還不是非常的漂亮，很多細(xì)節(jié)都沒有處理。實(shí)現(xiàn)這個(gè)功能最重要的就是使用display屬性和定位。
?? ???：天蓬老師?? ??：2019-04-12 09:14:05
???? ??：display屬性,其實(shí)應(yīng)該是學(xué)習(xí)css最應(yīng)該首先學(xué)的, 這是對(duì)我影響最大的一個(gè)屬性