常用导航布局案例之淘宝导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝导航</title>
<link rel="stylesheet" href="css/style05.css">
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="content">
<div class="menu">
<ul class="mbl">
<li class="l gj" >中国大陆 <i class="fa fa-angle-down";></i>
<div class="gjb">
<div >美国</div>
<div >日本</div>
<div >韩国</div>
<div >英国</div>
<div >英国</div>
<div >英国</div>
<div >英国</div>
<div >英国</div>
<div >英国</div>
<div >英国</div>
<div >英国</div>
<div >英国</div>
</div>
</li>
<li class="l"><a href="" style="color:#F72900;">亲，请登录</a></li>
<li class="l"><a href="">免费注册</a></li>
<li class="l"><a href="">手机逛淘宝</a></li>
</ul>
<ul class="mbr r">
<li class="l tb"><a href="">我的淘宝 <i class="fa fa-angle-down"></i></a>
<div class="wdtb">
<div >美国</div>
<div >日本</div>
</div>
</li>
<li class="l"><a href=""><span class="fa fa-cart-plus" style="color:#F72900;"></span>购物车<i class="fa fa-angle-down"></i></a></li>
<li class="l sc"><a href=""><span class="fa fa-star"></span>收藏夹<i class="fa fa-angle-down"></i></a>
<div class="scj">
<div >美国</div>
<div >日本</div>
</div>
</li>
<li class="l"><a href="">商品分类<i class="fa fa-angle-down"></i></a></li>
<li class="l mjz"><a href="">卖家中心<i class="fa fa-angle-down"></i></a>
<div class="mjzx">
<div >美国</div>
<div >日本</div>
</div>
</li>
<li class="l kf"><a href="">联系客服<i class="fa fa-angle-down"></i></a>
<div class="lxkf">
<div >美国</div>
<div >日本</div>
</div>
</li>
<li class="l dh"><a href=""><span class="fa fa-reorder"></span>网址导航<i class="fa fa-angle-down";></i></a>
<div class="wzdh">
<div >主题市场
<table>
<tr>
<td>钱</td>
<td>钱</td>
<td>钱</td>
<td>钱</td>
</tr>
<tr>
<td>钱</td>
<td>钱</td>
<td>钱</td>
<td>钱</td>
</tr>
<tr>
<td>钱</td>
<td>钱</td>
<td>钱</td>
<td>钱</td>
</tr>
<tr>
<td>钱</td>
<td>钱</td>
<td>钱</td>
<td>钱</td>
</tr>
</table>
</div>
<div >特色市场</div>
<div >阿里市场</div>
<div >精彩推荐</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
*{margin: 0px;padding-bottom: 0px;} /* 清除所有边距 */
a{text-decoration: none; color:#6C6C6C;font-size: 13px;}/* 清除a标签的样式 */
.l{float: left;}/* 左浮动 */
.r{float: right;}/* 右浮动 */
.clear{clear: both;}/* 清除浮动 */
ul li{list-style: none;}
.content{width:100%;background: #f5f5f5;}
.menu{width: 1200px;height:40px;margin:0px auto;}
.mbl li{margin-right: 10px;line-height: 40px;}
.mbr li{margin-right: 10px;line-height: 40px;}
/* .xx a span{color:#9C9C9C; } */
.gj{color:#6C6C6C;width: 90px;height: 40px;font-size: 13px;text-align: center;}
.gj:hover .gjb{background: #ffff; color:#6C6C6C;display: block;}
.gjb{display: none;width: 270px;height: 300px;background: cyan;}
.gjb div{ height: 20px;line-height: 20px;font-size: 13px;text-align: left; left:0px;top:0px;}
.mbl li a:hover {color:#F72900; }
.mbr li a:hover {color:#F72900; }
.mbr li a i{margin-left: 5px;}
.mbr li a span{margin-right: 5px;}
.wdtb{display: none;width: 80px;height: 70px;background: cyan;}
.wdtb div{height: 20px;line-height: 20px;font-size: 13px;text-align: left;}
.tb:hover .wdtb{display: block;}
.scj{display: none;width: 80px;height: 70px;background: cyan;}
.scj div{height: 20px;line-height: 20px;font-size: 13px;text-align: left;}
.sc:hover .scj{display: block;}
.mjzx{display: none;width: 80px;height: 70px;background: cyan;}
.mjzx div{height: 20px;line-height: 20px;font-size: 13px;text-align: left;}
.mjz:hover .mjzx{display: block;}
.lxkf{display: none;width: 80px;height: 70px;background: cyan;}
.lxkf div{height: 20px;line-height: 20px;font-size: 13px;text-align: left;}
.kf:hover .lxkf{display: block;}
.dh{position: relative;}
.wzdh{display: none;width: 1200px;height: 300px;background: cyan;position: absolute;right: 0px;}
.wzdh div{width: 298px;height:299px;border: 1px solid rgb(10, 10, 10) ;float: left;text-align: center;}
.dh:hover .wzdh{display: block;}
table{width: 298px;height: 298;}
td{width: 60px;height: 20px;}
tr{width: 240px;height:20px;}