82行的a标签要如何命中,以此改变nav_box的样式(display:block/none 切换)
小52019-03-23 17:19:04969<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝网 - 淘! 我喜欢</title>
<link rel="stylesheet" type="text/css" href="static\font-awesome-4.7.0\css\font-awesome.min.css">
<style>
*{margin: 0;padding: 0;}
i{margin-left: 2px;}
li{list-style: none;}
.head_con a{text-decoration: none;font-size: 13px;color: #6C6C6C;}
.head_con a:hover{color: #F22E00;}
.head_a{height: 36px;width: 85px;display: inline-block;text-align: center;position: relative;}
.head_con a:hover.head_a{background-color: #fff;}
.clear{clear: both;}
.head{height: 36px;width :100%; background-color: #F5F5F5;}
.head_con{height :36px; width: 1200px;margin: 0 auto;line-height: 36px;}
.head_left{height: 36px; float: left;}
.head_right{height: 36px;float: right;}
.head_right a ul{border: 1px solid #F5F5F5;border-top: none;position: absolute;display: none;}
.head_right a ul li{padding: 0 8px;color: #6C6C6C;height: 30px;line-height: 30px;width: 80px;text-align: left;}
.head_con a:hover ul{display: block;}
.head_con ul li:hover {background-color: #F5F5F5;}
.nav_box{height: 310px;width: 1200px;margin: 0 auto;border: 1px solid #F5F5F5;border-top: none;}
.nav_ul{width: 299px;border-right: 1px solid #F5F5F5;float: left;}
.nav_ul b{padding: 10px 0 0 10px; display: block;color: #FF4400;}
.nav_ul li{float: left; padding : 5px;font-size: 12px;margin: 5px 25px 0 10px;}
.nav_ul a{text-decoration: none;text-align: center;color: #6C6C6C;}
.nav_ul li:hover {background-color: #FF4400;}
.nav_ul li:hover a{color: #fff;}
.nav_nav{}
/*a.nav_nav:hover div.nav_box:active {display: block;}*/
</style>
</head>
<body>
<!--顶部导航栏-->
<div class="head">
<div class="head_con">
<div class="head_left">
<a href="" class="head_a">中国大陆 <i class=" fa fa-sort-desc"></i></a>
<a href="" style="color: #F22E00">亲,请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="head_right">
<a href="" class="head_a">我的淘宝 <i class=" fa fa-sort-desc"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""><span class="fa fa-cart-plus" style="color: #F22E00"></span> 购物车 <i class=" fa fa-sort-desc"></i></a>
<a href="" class="head_a"><span class="fa fa-star"></span> 收藏夹 <i class=" fa fa-sort-desc"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="">商品分类<span style="margin-left :20px;border-right: 1px solid #ccc;"></span></a>
<a href="" class="head_a" style="width: 105px">千牛卖家中心 <i class=" fa fa-sort-desc"></i>
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体检中心</li>
<li>问商友</li>
</ul>
</a>
<a href="" class="head_a">联系客服 <i class=" fa fa-sort-desc"></i>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</a>
<a href="" class="head_a nav_nav"><span class="fa fa-tasks" style="color: #F22E00"></span> 网站导航 <i class=" fa fa-sort-desc"></i></a>
<!--这里有问题↑-->
</div>
<div class="clear"></div>
</div>
</div>
<!--网站导航-->
<div class="nav_box">
<ul class="nav_ul">
<b>主体市场</b>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<div class="clear"></div>
</ul>
<ul class="nav_ul">
<b>主体市场</b>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<div class="clear"></div>
</ul>
<ul class="nav_ul">
<b>主体市场</b>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<div class="clear"></div>
</ul>
<ul class="nav_ul" style="border-right: none">
<b>主体市场</b>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">男装</a></li>
<li><a href="">鞋靴</a></li>
<li><a href="">箱包</a></li>
<li><a href="">婴童</a></li>
<li><a href="">家电</a></li>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</body>
</html>