带下拉菜单的导航

abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> &

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="layui/css/layui.css">
<title>淘宝首页</title>
</head>
<body>
<div class="header">
<div class="header_c">
<div class="header_c_l l">
<a href="">中国大陆</a>&nbsp&nbsp<i class="layui-icon layui-icon-down"></i>
<a href="" style="color:#ff6500;">亲，请登陆</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header_c_r r">
<a href="" class="header_1">我的淘宝&nbsp&nbsp<i class="layui-icon layui-icon-down"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="" ><span class="layui-icon layui-icon-cart-simple" id="header_a"></span>&nbsp购物车</a>
<a href="" class="header_1"><span class="layui-icon layui-icon-star-fill"></span>收藏夹&nbsp&nbsp<i class="layui-icon layui-icon-down"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="">商品分类</a>
<a href="" class="header_1">卖家中心&nbsp&nbsp<i class="layui-icon layui-icon-down"></i>
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体检中心</li>
<li>问商友</li>
</ul>
</a>
<a href="" class="header_1">联系客服&nbsp&nbsp<i class="layui-icon layui-icon-down"></i>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</a>
<a href=""><span class="layui-icon layui-icon-shrink-right"  id="header_a"></span>&nbsp网站导航&nbsp&nbsp<i class="layui-icon layui-icon-down"></i></a>
</div>
<div class="clear"></div>

</div>
</div>

</body>
</html>

*{margin: 0px; padding:0px;}
a{text-decoration: none;color:white;font-size: 12px;}
ul li{font-size: 12px;color:black;}
.l{float:left;}
.r{float:right;}
.clear{clear: both;}
.header{width:100%;line-height: 40px;background: #f5f5f5;}
.header_c{width: 1200px;height: 40px;margin: 0 auto;}
.header_c a:hover{color: #ff6500; background: #fff;}
.header_c_l{width:300px;height: 40px;}
.header_c_l a{margin: 0 3px;}
.header_c_l i{font-size: 12px;}

.header_c_r{height: 40px}
.header_c_r a{display: inline-block;margin: 0 5px;}
.header_c_r a i{font-size: 12px;}
.header_c_r a span{font-size: 12px;}
#header_a{color: #ff6500;}

.header_1{position: relative;}
.header_1 ul{border: 1px solid #f5f5f5; display: none; border-top: none; position: absolute;}
.header_1 ul li{width: 90px; padding: 0 3px;margin: 3px 0;}
.header_1 ul li:hover{background: #f5f5f5;}
.header_1:hover ul{display: block;}

Correcting teacher：灭绝师太Correction time：2019-02-14 09:19:28
Teacher's summary：建议:带有二级下拉菜单导航最好不要使用a链接嵌套

带下拉菜单的导航

Popular Entries