摘要: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网易考拉</title>
<link r
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网易考拉</title>
<link rel="stylesheet" type="text/css" href="css/kaola.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="kaola">
<div class="kldb">
<div class="klleft">
<a href="" style="color:#999999">考拉欢迎你!</a>
<a href="">登陆</a>
<a href="">免费注册</a>
<a href="">手机考拉</a>
</div>
<div class="klright">
<a href="">每日签到</a>
<a href="">我的订单</a>
<a href="" class="box">个人中心 <i class="fa fa-caret-down"></i>
<ul>
<li>我的优惠券</li>
<li>我的红包</li>
<li>我的考拉豆</li>
<li>我的账号管理</li>
<li>我的实名认证</li>
<li>我收藏的商品</li>
<li>我关注的品牌</li>
<li>售后管理</li>
</ul>
</a>
<a href="" class="box" >客户服务 <i class="fa fa-caret-down"></i>
<ul>
<li>联系客服</li>
<li>帮助中心</li>
</ul>
</a>
<a href="" class="box">充值中心 <i class="fa fa-caret-down"></i>
<ul>
<li>话费充值</li>
<li>流量充值</li>
<li>Appstore充值</li>
</ul>
</a>
<a href="" class="box">消费者权益 <i class="fa fa-caret-down"></i>
<ul>
<li>消费者告知书</li>
<li>消费投诉公示</li>
</ul>
</a>
<a href="" class="box">更多 <i class="fa fa-caret-down"></i>
<ul>
<li>收藏本站</li>
<li>微信公众号</li>
<li>新浪微博</li>
<li>易信公众号</li>
<li>招商合作</li>
<li>考拉职位</li>
</ul>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
*{margin: 0px;padding: 0px;}
.clear{clear:both;}
li{list-style: none;}
a{text-decoration: none;line-height: 40px;font-size: 12px;margin: 0px 5px;color:#999999}
.kaola{width: 100%;height:40px;background: #000;}
.kldb{width: 1100px;height: 40px;margin: 0px auto;}
.klleft{display: inline-block; height: 40px;float: left;}
.klright{display: inline-block; height: 40px;float: right;position: relative;}
.kldb a:hover{color: #ff2651}
.box{display: inline-block;height: 40px;width: 80px;text-align: center;}
.box:hover{background-color: #ffffff;}
.box ul{border: 1px solid #ccc;border-top:none;position: absolute;}
.box ul li{display: inline-block;color: #000;text-align:left;padding: 0px 10px; display: none;}
.box:hover ul li{display: block; width: 80px;background-color:#ffffff;}