老师请帮我看下 下拉菜单有问题
<!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"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./font/iconfont.css"> <title>慕淘网</title> </head> <body> <div class="nav-site"> <div class="container"> <ul class="nav-lf lf"> <a href="javascript:;" class="nav-site-login link"> <li>亲,请登录</li> </a> <a href="javascript:;" class="nav-site-signup link"> <li>免费注册</li> </a> <a href="javascript:;" class="nav-site-mobile link"> <li>手机逛慕淘</li> </a> </ul> <ul class="nav-rl rl"> <li class="dropdown rl-list"> <a href="" class="dropdown-toggle link">我的慕淘</a><i class="iconfont xialajiantou"></i> <ul class="dropdown-layer"> <li><a href="###" class="dropdown-item">已买到宝贝</a></li> <li><a href="###" class="dropdown-item">我的足迹</a></li> </ul class="dropdown-layer"> </li> <li class="dropdown rl-list"> <a href="" class="dropdown-toggle link">收藏夹</a><i class="iconfont xialajiantou"></i> <ul class="dropdown-layer"> <li><a href="###" class="dropdown-item">收藏的宝贝</a></li> <li><a href="###" class="dropdown-item">收藏的店铺</a></li> </ul> </li> <li class="dropdown rl-list"> <a href="" class="dropdown-toggle link">商品分类</a> <i class="iconfont xialajiantou"></i> </li> <li class="dropdown rl-list"> <a href="" class="dropdown-toggle link">卖家中心</a> <i class="iconfont xialajiantou"></i> <ul class="dropdown-layer"> <li><a href="###" class="dropdown-item">免费开店</a></li> <li><a href="###" class="dropdown-item">已卖出的宝贝</a></li> <li><a href="###" class="dropdown-item">出售中的宝贝</a></li> <li><a href="###" class="dropdown-item">卖家服务市场</a></li> <li><a href="###" class="dropdown-item">卖家培训中心</a></li> <li><a href="###" class="dropdown-item">体验中心</a></li> </ul> </li> <li class="dropdown rl-list"> <a href="" class="dropdown-toggle link">联系客服</a> <i class="iconfont xialajiantou"></i> <ul class="dropdown-layer dropdown-layer05"> <li><a href="###" class="dropdown-item">消费者客服</a></li> <li><a href="###" class="dropdown-item">卖家客服</a></li> </ul> </li> </ul> </div> </div> <script src="./js/jquery.js"></script> <script src="./js/index.js"></script> </body> </html>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/* ===================================== */
/* 页面公共样式 */
.container {
width: 1200px;
margin: 0 auto;
}
.link,.nav-rl {
color: #4d555d;
}
.link:hover {
color: #f01414;
}
/* ================================================== */
/* 首页样式 */
.nav-site {
position: relative;
width: 100%;
background-color: #f3f5f7;
}
.container {
position: relative;
height: 44px;
line-height: 44px;
font-size: 16px;
border-bottom: 1px solid #cdd0d4;
}
.nav-lf {
float: left;
}
.nav-lf a {
float: left;
margin: 0 10px;
}
.nav-rl {
float: right;
}
/* dropdown */
.dropdown {
z-index: 10;
position: relative;
margin: 0 10px;
padding: 0 10px;
float: left;
}
.dropdown-toggle {
display: inline-block;
height: 100%;
/* margin-right: 8px; */
/* padding: 0 16px 0 12px; */
}
/* 字体图标属性 */
.iconfont {
font-family: "iconfont" !important;
font-size: 20px;
line-height: 20px;
text-align: center;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.xialajiantou {
display: inline-block;
width: 20px;
height: 20px;
transition: all 0.5s;
cursor: pointer;
}
.xialajiantou:hover {
color: #f01414;
transform: rotate(180deg);
}
.dropdown-layer {
z-index: 9;
display: none;
/* display: block; */
position: absolute;
top: 44px;
margin-left: -11px;
background-color: #fff;
border: 1px solid #cdd0d4;
border-top: none;
}
.dropdown-layer05 {
margin-left: -8px;
}
.dropdown-item {
display: block;
white-space: nowrap;
height: 30px;
line-height: 30px;
margin: 8px 0;
padding: 0 10px;
color: #4d555d;
}
.dropdown-item:hover {
color: #cf3d6e;
}$('.dropdown').hover(function(){
var $dropdown = $(this);
var $xialajiantou = $(this);
$dropdown.css({
'background-color': '#fff',
'border-color': '#cdd0d4'
});
$dropdown.find('xialajiantou').css({
'color': '#f01414',
'transform': 'rotate(180deg)'
});
$dropdown.find('.dropdown-layer').show()
// $xialajiantou.find('.dropdown-layer').show()
},function(){
var $dropdown = $(this);
$dropdown.css({
'background-color': '',
'border-color': '#cdd0d4'
});
$dropdown.find('.dropdown-layer').hide()
// $xialajiantou.find('.dropdown-layer').hide()
})怎么实现滑入下拉箭头 现实下拉项目
18
收起
正在回答
4回答
同学你好，能够自己发现问题很棒！ 工作中，独立思考与解决问题是非常重要的，继续加油哦。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星