????：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>導(dǎo)航菜單</title><link rel="stylesheet" type="text/css" href="css/font-awes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導(dǎo)航菜單</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color: #6C6C6C;font-size: 12px;}
li{list-style: none;}
.clear{clear:both;}
.pl8{padding-left: 8px}
.top{width: 100%;height: 40px;line-height: 40px;background: #F5F5F5;border-bottom: 1px solid #eee;}
.menu{width: 1200px;margin: 0 auto;}
.menu a{display: inline-block;padding: 0 4px;position: relative;}
.left{width: 300px;float: left;}
.right{width: 600px;float: right;}
.right ul{display: none;border:1px solid #F5F5F5;position: absolute;left:0px;top:40px;width: 84px;border-top: none}
.right ul li{list-style: none;text-align: left;padding: 0 4px;height:26px;line-height: 26px;margin:6px 0; color:#6C6C6C;}
a.bg:hover ul{display: block}
a.bg ul li:hover{background:#F5F5F5;}
.menu a:hover{color:#FF4400;}
.menu a.bg:hover {background: #fff;}
.orange{color: #FF5000;}
.bigdown{position: absolute;left:-510px;top:40px;width: 602px;border: 1px solid #F5F5F5;display: none;}
.down1{width: 300px;border-right: 1px solid #F5F5F5;overflow: hidden;float: left;}
.down1 p,.down2 p{font-size: 18px;color:#FF4400;padding-left: 10px;}
.down1 li,.down2 li{display: block;float: left;padding:0 10px;}
.down2 p{color:#9FB838;}
.down2{width: 300px;float: left;}
.navs:hover .bigdown{display: block;}
</style>
</head>
<body>
<div>
<div>
<div>
<a href="">中國大陸<span class="pl8 fa fa-angle-down"></span></a>
<a href="">親,請登錄</a>
<a href="">免費(fèi)注冊</a>
<a href="">手機(jī)逛淘寶</a>
</div>
<div>
<a href="">我的淘寶<span class="pl8 fa fa-angle-down"></span>
<ul>
<li>已買到的寶貝</li>
<li>我的足跡</li>
</ul>
</a>
<a href=""><span class="fa fa-cart-plus orange"></span> 購物車<span class="pl8 fa fa-angle-down"></span></a>
<a href=""><span class="fa fa-star"></span> 收藏夾</a>
<a href="">商品分類</a>
<a href="">賣家中心<span class="pl8 fa fa-angle-down"></span></a>
<a href="">聯(lián)系客服<span class="pl8 fa fa-angle-down"></span></a>
<a href="" class="bg navs"><span class="fa fa-navicon orange"> </span>網(wǎng)站導(dǎo)航<span class="pl8 fa fa-angle-down"></span>
<div>
<div>
<p>主題市場</p>
<li>女裝</li>
<li>男裝</li>
<li>內(nèi)衣</li>
<li>鞋靴</li>
<li>箱包</li>
<li>嬰童</li>
<li>家電</li>
<li>數(shù)碼</li>
<li>手機(jī)</li>
<li>美妝</li>
<li>珠寶</li>
<li>眼鏡</li>
<li>手表</li>
<li>運(yùn)動</li>
<li>戶外</li>
<li>樂器</li>
<li>游戲</li>
<li>動漫</li>
<li>影視</li>
<li>美食</li>
<li>鮮花</li>
<li>寵物</li>
<li>農(nóng)資</li>
<li>房產(chǎn)</li>
<li>裝修</li>
<li>建材</li>
<li>家居</li>
<li>百貨</li>
<li>汽車</li>
<li>二手車</li>
<li>辦公</li>
<li>定制</li>
<li>教育</li>
<li>卡券</li>
<li>本地</li>
</div>
<div>
<p>特色市場</p>
<li>愛逛街 </li>
<li>美妝秀 </li>
<li>全球購 </li>
<li>腔調(diào) </li>
<li>淘女郎 </li>
<li>星店 </li>
<li>極有家 </li>
<li>阿里拍賣</li>
<li>淘寶眾籌</li>
<li>飛豬 </li>
<li>親寶貝 </li>
<li>閑魚 </li>
<li>農(nóng)資 </li>
<li>天天特賣</li>
<li>Outlets </li>
<li>儷人購 </li>
<li>聚名品 </li>
<li>淘搶購 </li>
<li>全球精選</li>
<li>非常大牌</li>
<li>試用 </li>
<li>量販團(tuán) </li>
<li>阿里翻譯</li>
</div>
</div>
</a>
</div>
</div>
</div>
<div></div>
<!--總結(jié)：本頁面難點在于display和定位的技巧掌握-->
</body>
</html>
?? ???：韋小寶?? ??：2019-03-11 17:10:58
???? ??：寫的很不錯 css來實現(xiàn)下拉菜單還是蠻簡單的 總的來說要比js來實現(xiàn)簡單多了