摘要：<!doctype html><html><head><meta charset="UTF-8"><title>新浪導(dǎo)航條</title><link rel="stylesheet" href="css/dht.css"><link rel=&quo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>新浪導(dǎo)航條</title>
<link rel="stylesheet" href="css/dht.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{margin: 0px;padding: 0px;}
.header{width:100% ;height: 40px;background-color: #F7F4F4;
border-bottom: 1px solid #DEDCDC;border-top: 3px solid #FF8500;}
.header_content{width: 1000px;height: 40px; margin: auto;line-height: 40px;}
.header_left{width:400px ;height: 40px; float: left;}
.header_right{width:500px ;height: 40px;float: right;text-align: right;}
a{display:inline-block;text-decoration: none;color: #000;font-size: 12px;
text-align: center; height: 40px;}
.header_content a:hover{color:#FF8500 ;background:#D6DDEF;line-height: 40px;}
.clear{clear: both;}
.header_left a{padding-left: 10px;padding-right: 10px;}
.header_right a{padding-left: 18px;padding-right: 18px;}
.header_a{display:inline-block;height: 40px;text-align: center;/*width: 70px;*/
position: relative;}
li{list-style: none;}
.header_a ul{border:1px solid #FF8500;border-top:#ffff;display: none;width: 80px;}
.header_a:hover ul{display: block;position: absolute;left:0px;/*text-align: left;*/ }
.header_a ul li{color: #000; height: 30px;line-height: 30px;text-align: left;
background-color:#FCFCFC;border-bottom: 1px solid #FF8500;/*margin-left: 3px;*/}
.header_a ul li:hover{background-color:#F4D0A8;margin-top: 2px;margin-bottom: 2px; }
</style>
</head>
<body>
<div>
<div>
<div>
<a href="">設(shè)為首頁</a>
<a href="">手機新浪網(wǎng)</a>
<a href="">移動客戶端 <i class="fa fa-angle-down" style="color: red;"></i>
<ul>
<li>新浪微博</li>
<li>新浪新聞</li>
<li>新浪財經(jīng)</li>
<li>新浪體育</li>
<li>新浪升學(xué)幫</li>
<li>新浪港股通</li>
</ul>
</a>
</div>
<div>
<a href="">登錄</a>
<a href="">微博 <i class="fa fa-angle-down" style="color: red;"></i>
<ul>
<li>私信</li>
<li>評論</li>
<li>@ 我</li>
</ul>
</a>
<a href="">博客 <i class="fa fa-angle-down" style="color: red;"></i>
<ul>
<li>博客評論</li>
<li>未讀提醒</li>
</ul>
</a>
<a href="">郵箱 <i class="fa fa-angle-down" style="color: red;"></i>
<ul>
<li>免費郵箱</li>
<li>VIP郵箱</li>
<li>企業(yè)郵箱</li>
<li >新浪郵箱客戶端</li>
</ul>
</a>
<a href="">網(wǎng)站導(dǎo)航</a>
</div>
<div></div>
</div>
</div>
</body>
</html>
批改老師：西門大官人批改時間：2019-03-03 13:19:54
老師總結(jié)：下拉菜單的實現(xiàn)原理，留意一下li和hover的樣式