<html>
<head>
<meta charset="utf-8">
<title>tian猫</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="top">
<div class="topmenu">
<div class="menuleft">
<a href="#" >瞄，欢迎来到天猫</a>
<a href="#" >请登录</a>
<a href="#" >免费注册</a>
</div>
<ul class="menuright">
<li><a href="">我的淘宝</a><i class="fa fa-angle-down"></i>
<div class="number">
<a href="#">已买到的宝贝</a><br>
<a href="#">已卖出的宝贝</a>
</div>
</li>
<li><a href=""><i class="fa fa-shopping-cart"></i>购物车0件</a></li>
<li><a href="">收藏夹</a><i class="fa fa-angle-down"></i>
<div class="dope">
<a href="#">收藏宝贝</a><br>
<a href="#">收藏店铺</a>
</div>
</li>
<li><a href="">|</a></li>
<li><a href=""><i class="fa fa-phone-square"></i>手机版</a></li>
<li><a href="">淘宝网</a></li>
<li><a href="">商家支持</a><i class="fa fa-angle-down"></i></li>
<li><a href=""><i class="fa fa-heart"></i>网站导航</a><i class="fa fa-angle-down"></i>
<div id="website">
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
*{ margin: 0px ; padding: 0px;}
.top{ background-color: #F2F2F2; width: 100%; height: 35px}
.topmenu{ width: 1230px; height: 35px; margin: 0px auto;}
.topmenu a{ text-decoration: none; font-size: 13px; color: #B8B8B8;
padding: 2px 10px 2px 0px;}
.topmenu a:hover{ color: red;}
.topmenu ul{ list-style: none}
.menuleft{ width: 250px; height: 35px; line-height: 35px;float:left;}
.menuright{ float: right; line-height: 35px; height: 35px;}
.menuright li{float: left; padding: 2px 10px 2px 0px; position: relative;}
.menuright li div{ box-shadow: 2px 1px 5px #ccc; background-color: #fff; text-align: center}
.number{position: absolute; width: 100px;left: 0px;top:35px;line-height: 25px; padding: 5px 0px;display: none}
.dope{ width: 90px; position: absolute; left: 0px;
top: 35px; line-height: 25px;padding: 5px 0px; display: none}
#website{ width: 1230px; height: 250px; position: absolute; right: 0px; display: none;}
.menuright li:hover div{display: block}
