<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>喵，我是天猫！</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/logo1.png">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="top">
<div class="content">
<div class="left">
<span>喵，欢迎来到天猫</span>
<a href="">请登录</a>
<a href="">免费注册</a>
</div>
<div class="right">
<li>
<a href="#" class="wo">我的宝贝 <i class="fa fa-angle-down"></i></a>
<div class="taobao">
<a href="" >买到的宝贝</a><br>
<a href="" >卖出的宝贝</a>
</div>
</li>
<li>
<a href=""><i class="fa fa-heart"></i> 我关注的品牌</a>
</li>
<li>
<a href=""><i class="fa fa-shopping-cart"></i> 购物车0件</a>
</li>
<li>
<a href=""> 收藏夹</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href=""><i class="fa fa-shopping-cart"></i> 手机版</a>
</li>
<li>
<a href="">淘宝网</a>
</li>
<li>
<a href=""><i class="fa fa-shopping-cart"></i> 网站导航</a>
<div id="website"></div>
</li>
</div>
</div>
</div>
</body>
</html>
*{margin: 0px;padding: 0px;}
ul,li{list-style: none;}
a{text-decoration: none;color: #6D6E6A;font-size: 12px;}
a:hover{color:red;}
span{text-decoration: none;color: #6D6E6A;font-size: 12px;margin-right:18px;}
.top{width:100%;height:35px;background: #F2F2F2;}
.content{width:1230px;margin:auto;}
.left{float:left;height:35px;line-height: 35px;width:300px;}
.left a{margin-right: 18px;}
.right{float:right;height:35px;line-height: 35px;}
.right li{float:left;margin-left:15px;position:relative;}
.right li div{background: #fff;text-align: center;box-shadow: 2px 1px 5px #ccc;width:120px;display:none;}
.right li:hover div{display:block;}
.right li i{color:red;}
.wo{ display:block;padding:0 10px; font-size:12px;}
.wo:hover{ display:block;background:#fff;padding:0 10px; font-size:12px;}
.taobao{width:120px;position:absolute;left:0px;top:35px;}
#website{width: 1230px;height: 250px;position: absolute;right: 0px;top: 35px;}
