仿新浪导航条带下拉菜单
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>新浪导航条</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="">设为首页</a>
<a href="">手机新浪网</a>
<a href="">移动客户端 <i class="fa fa-angle-down" style="color: red;"></i>
<ul>
<li>新浪微博</li>
<li>新浪新闻</li>
<li>新浪财经</li>
<li>新浪体育</li>
<li>新浪升学帮</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>企业邮箱</li>
<li >新浪邮箱客户端</li>
</ul>
</a>
<a href="">网站导航</a>
</div>
<div></div>
</div>
</div>
</body>
</html>