摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>淘宝网</title><link rel="stylesheet" type="text/css" href="index.css"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝网</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
<div>
<div>
<a href="" title="">中国大陆</a>
<a href="" title="" style="color:#ff5000;">登录</a>
<a href="" title="">免费注册</a>
<a href="" title="">手机逛淘宝</a>
</div>
<div>
<a href="" title="">我的淘宝
<ul>
<li>已买到的宝贝</li>
<li>已卖出的宝贝</li>
</ul>
</a>
<a href="" title="">购物车</a>
<a href="" title="">收藏夹
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="" title="">商品分类</a>
<a href="" title="">卖家中心
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体检中心</li>
<li>问商友</li>
</ul>
</a>
<a href="" title="">联系客服
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</a>
<a href="" title="">网站导航</a>
</div>
</div>
<div></div>
</div>
</body>
</html>
*{margin: 0;padding: 0}
a{text-decoration: none;color:#666666;font-size: 14px;}
li{list-style: none;}
.clear{clear: both;}
.header{width:100%;background-color: #f5f5f5;}
.header_content{width:1200px;margin:0 auto;line-height: 40px;}
.header_left{height:40px;float: left;}
.header_left a{margin-right: 4px;}
.header_content a:hover{color:#ff5000;}
.header_right{height:40px;float: right;position: relative;}
.header_a{display: inline-block;width:90px;height:40px;text-align: center;}
.header_a:hover{background-color: #fff;}
.header_a ul{border:1px solid #f5f5f5;display: none;position: absolute;border-top: none;}
.header_a:hover ul{display: block;}
.header_a ul li{color:#666666;height:30px;line-height:30px;text-align: left;padding:2px 8px;margin: 5px 0;}
.header_a ul li:hover{background-color: #f5f5f5;}
批改老师：灭绝师太批改时间：2019-01-03 08:57:36
老师总结：效果不错，但是建议：带有二级下拉菜单的导航最好不要用a链接嵌套
