导航条的下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航条</title>
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type='text/css'>
*{margin:0px;padding:0px;}
.header{width:100%;height: 40px;background-color: #f5f5f5;}
.content{width:1200px;height:40px;background-color: #f5f5f5;margin:auto;line-height: 40px;font-size:13px;}
.right1 {font-family: 宋体;float:right;color:#646464;height:30px;}
li {list-style-type: none;float:left;text-align: center;}
a {width:68px;color:#646464;text-decoration: none;padding:0px 1px;/*position: relative;*/}
.lili{text-align: left;width:80px;height:30px;border:1px solid #f5f5f5;border-top:none;padding:0px 3px;display:none;/*position: absolute;*/}
a:hover {color:red;}
ul {text-align: left;width:200px;height:80px;border:1px solid #f5f5f5;padding:0px 3px;display:none;color:#646464;}
.items0 {width:40px;}
.items:hover .lili{display:block;} /****items后面不可以有空格****/
.lili:hover{background:#757575;}
.left1:hover ul{display:block;}
ul li:hover {color:red;}
</style>
</head>
<body>
<div class="header">
<div class="content">
<div class="left1" style="float:left;">送至：北京<i class="fa fa-angle-down"></i>
<ul>
<li class="items0">北京</li>
<li class="items0">天津</li>
<li class="items0">河北</li>
<li class="items0">山西</li>
<li class="items0">内蒙古</li>
<li class="items0">辽宁</li>
<li class="items0">吉林</li>
<li class="items0">黑龙江</li>
<li class="items0">上海</li>
<li class="items0">江苏</li>
</ul>
</div>
<div class="right1" style="float:right;">
<li>迎光临当当，请<a href="#">登录</a></li>
<li><a href="#">成为会员</a>|</i></li>
<li><a href="#">我的云书房</a>|</li>
<li class="items" style="width:78px;"><a href="#">我的当当</a><i class="fa fa-angle-down"></i> |
<div class="lili" href="#">我的订单</div>
</li>
<li><a href="#">小说投稿</a>|</li>
<li><a href="#">我要出书</a>|</li>
<li class="items" style="width:80px;"><a href="#">企业采购</a><i class="fa fa-angle-down"></i> |
<div class="lili" href="#">大宗采购</div>
</li>
<li class="items" style="width:78px;"><a href="#">客户服务</a><i class="fa fa-angle-down"></i>
<div class="lili" href="#">帮助中心</div>
</li>
</div>
</div>
</div>
</div>
</body>
</html>