老师帮我看下，第三种hover方式~为什么dropdown-layer出不来呢
<!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/base.css">
<link rel="stylesheet" href="css/common.css">
<!-- <link rel="stylesheet" href="css/index.css"> -->
<style type="text/css">
/* nav-site 顶部站点导航 */
.nav-site{
width:100%;
background-color: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
/* 左侧 */
.nav-site-login{
margin-left:15px;
color:#f01414;
}
.nav-site-mobile,
.nav-site-signup{
margin-left:10px;
}
.nav-site.category {
margin: 0 10px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.nav-site-service {
margin-right: 15px;
}
/* 右侧 dropwodn*/
.dropwodn{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow{
display: inline-block;
width: 8px;
height: 6px;
background: url(img/dropdown-arrow.png) no-repeat center;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
display:none;
position: absolute;
top:43px;
background-color:#fff;
z-index: 1;
border: 1px solid #cdd0d4;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
.dropdown-item{
display: block;
height: 30px;
line-height: 30px;
color: #4d555d;
white-space: nowrap;
padding: 0px 12px;
}
.dropdown-item:hover{
background-color: #f3f5f7;
}
.dropdown-active .dropdown-toggle,
/* .dropdown:hover.dropdown-toggle, */
.dropdown-toggle:hover.dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-arrow,
/* .dropdown:hover.dropdown-toggle,
直接用dropdown：hover，完全没效果。用dropdown-toggle:hover，最后一个layer层显示不出来 */
*/
.dropdown-toggle:hover .dropdown-arrow{
background: url(img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer,
/* .dropdown:hover.dropdown-toggle, */
.dropdown-toggle:hover .dropdown-layer{
display: block;
}
</style>
</head>
<body>
<!-- 站点导航 -->
<div class="nav-site">
<div class="container">
<!-- 左侧 -->
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<!-- 右侧 -->
<ul class="fr">
<li class="dropwodn fl">
<a href="###" target="_blank" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-item">我的足迹</a></li>
</ul>
</li>
<li class="dropwodn fl">
<a href="###" target="_blank" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="dropwodn fl">
<a href="###" target="_blank" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-item">免费开店</a></li>
<li><a href="###" target="_blank" class="dropdown-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="dropdown-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="dropdown-item">体验中心</a></li>
</ul>
</li>
<li class="nav-site-service dropwodn fl">
<a href="###" target="_blank" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="dropdown-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="dropdown-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
<script>
window.iQuery || document.write('<script src="js/jquery-3.4.1.min.js"><\/script>');
</script>
<script src="js/index.js"></script>
</body>
</html>
正在回答
你好同学，如下修改：
有一个多余的注释：
选择器设置的不对，你使用的后代选择器，但是dropdown-layer不是dropdown-toggle的子元素，改为兄弟选择器：
祝学习愉快，望采纳。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星