老师帮我看代码哪里有问题为什么菜单不能下拉l路径没有错但是js代码好像不起作用一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" 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="dropdown 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="dropdown 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="dropdown fl">
<a href="###" target="_blank" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></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>
<li><a href="###" target="_blank" class="dropdown-item">体验中心</a></li>
</ul>
</li>
<li class="nav-site-service dropdown 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="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script src="js/index.js"></script>
</body>
</html>
css代码
css文件base:*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
index文件:.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-signup,
.nav-site-mobile{margin-left:10px;}
.nav-site .category{margin:0 10px:}
.dropdown{position:relative;}
.dropdown-toggle{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;
margin-left:8px;
vertical-align:middle;}
.dropdown-layer{display:none;
position:absolute;
top:44px;
background-color:#fff;
border:1px solid #cdd0d4;}
.dropdown-left{left:0;
right:auto;}
.dropdown-item{display:block;
height:30px;
line-height:30px;
white-space:nowrap;}
.dropdow-item:hover{background-color:#f3f5f7;
}
commoncss文件代码:.container{
width:1200px;
margin:0 auto;}
.link{color:#4d555d;}
.link:hover{color:#f01414;}
index.js文件代码:// 第一中方法
// $('.dropdown').hover(function(){
// var $dropdown=$(this);
// $dropdown.find('.dropdown-toggle').css({
// 'background-color':'#fff',
// 'border-color':'#cdd0d4'
// });
// $dropdown.find('.dropdown-arrow').css({
// 'background-image':'url(img/dropdown-arrow-active.png)'
// });
// $dropdown.find('.dropdown-layer').show();
// },function(){
// var $dropdown=$(this);
// $dropdown.find('.dropdown-toggle').css({
// 'background-color':'',
// 'border-color':'#f3f5f7'
// });
// $dropdown.find('.dropdown-arrow').css({
// 'background-image':'url(img/dropdown-arrow-active.png)'
// });
// $dropdown.find('.dropdown-layer').hide();
// });
// 第二种方法
// $('.dropdown').hover(function(){
// $(this).addClass('dropdown-active');
// },function(){
// $(this).removeClass('dropdown-active');
// });
// 第三种方法，不使用js, 直接使用css中的hover实现
正在回答 回答被采纳积分+1
同学你好，问题解答如下：
1、第一种js起作用，需要将移出事件中的箭头路径换掉：
2、第二种和第三种需要在css中添加dropdown-active类以及hover效果：
下拉菜单1-1课程中有详细的讲解，如果忘记了可以回顾一下哦：
https://class.imooc.com/lesson/804#mid=20218
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星