摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>淘宝头导航条</title> <link rel="stylesheet" type="text/css" href
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝头导航条</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<div></div>
<div>
<div>
<a href="" style="color: #000;">中国大陆</a>
<a href="" style="color: #FF5000">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div>
<a href="">淘宝网首页</a>
<a href="">我的淘宝
<ul>
<li>以买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="">购物车</a>
<a href="">收藏夹</a>
<a href="">跨境物流管理</a>
<a href=""海外消费者帮助></a>
</div>
</div>
<div></div>
</div>
<body>
</body>
</html>
*{margin: 0px;padding: 0px;}
a{text-decoration: none;color: #6c6c6c;font-size: 13px;margin-right: 5px;}
ul{list-style: none;}
.header{background-color: #F5F5F5;width: 100%;}
.clear{clear: both;}
.header_content{width: 1200px;margin: 0px auto; line-height: 40px;}
.header_content_left{height: 40px;float: left; /* background: pink; */}
.header_content_right{height: 40px;float: right; /* background: pink; */}
/*.header_content_left a{}*/
.header_content_left_a{display: inline-block;text-align: center;position: relative;}
.header_content a:hover{color: #FF5000}
.header_content_left_a:hover{background-color: white;}
.header_content_left_a ul{border: 1px solid #F5F5F5;display: none;}
.header_content_left_a li{color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 5px 0px;}
.header_content_left_a:hover ul{display: block;position: absolute;width: 100px;}
.header_content_left_a li:hover{background-color: #F5F5F5;}
批改老师：天蓬老师批改时间：2018-11-09 21:42:01
老师总结：这个案例,最核心的思想是,用绝对定位技术实现.绝对定位在实际开发中,远比相对定位实用
