老师，我的项目放在wampserver下运行，下拉箭头找不到图片
来源：3-5 让菜单下拉
qq_勿忘初心_H
2020-04-20 22:32:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1</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">
<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">
<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="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="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>
<script src="js/index.js"></script>
</body>
</html>
/* 公共样式 */
.container{
width: 1200px;
margin: 0 auto;
}
a:link{
color: #4d555d;
}
a.link:hover { /*链接经过颜色*/
color: #f01414 !important;
}
*{
margin:0;
padding:0;
}
body{
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h2,h3,h4,h5,h6{
font-size: 100%;
font-weight: normal;
}
em,i{
font-style: normal;
}
a{
text-decoration: none;
}
img{
border: none;
vertical-align: top;
}
li{
list-style: none;
}
table{
border-spacing: 0;
border-collapse: collapse;
}
/* */
.fl{
float: left;
display: inline;
}
.fr{
float: right;
display: inline;
}/*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-signup,
.nav-site-mobile{
margin-left: 10px;
}
.nav-site-category{
margin:0 10px;
}
/* dropdown菜单 */
.dropdown{
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;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #cdd0d4;
z-index: 1;
top: 43px;
}
.dropdown-left{
left: 0;
}
.dropdown-right{
right: 0;
}
.dropdown-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap; /*规定段落中的文本不进行换行*/
}
.dropdown-item:hover{
background-color: #f3f5f7;
}
/* 下拉菜单通过js和css来实现 ,*/
/* 第一种方法：在css中通过hover来控制显示隐藏，但是只支持现代浏览器 */
/* .dropdown:hover .dropdown-toggle{
background-color: #fff;
border-color:#cdd0d4;
}
.dropdown:hover .dropdown-arrow{
background-image: url(../img/dropdown-arrow-active.png);
}
.dropdown:hover .dropdown-layer{
display:block;
}*/
/* 第二种和第3种方法需借助js，详见index.js */
/* 第三种 */
.dropdown-active .dropdown-toggle{
background-color: #fff;
border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow{
background-image: url(../img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer{
display:block;
}
上面显示我的图片途径在localhost下的img文件夹下找，但是我的img是在base-1下
写回答
3回答
-
同学你好，使用同学提供的代码，没有进行任何改动，在鼠标移入再移出菜单时，箭头是有的，如下：
同学测试的代码是和上传的代码哪里不一样吗？如果不一样的话，要把不一样的代码上传一下，老师帮助测试。祝学习愉快~
0 -
好帮手慕言
2020-04-21
同学你好，使用同学提供的代码，放到WampServer服务器下运行，下拉箭头是显示的，如下：
同学可以检查一下项目目录，看下路径是不是正确的。祝学习愉快~
0h020-04-21 -
qq_勿忘初心_H
提问者
2020-04-20
js代码如下
// 第二种方法 //1. hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。 //2. 方法触发 mouseenter 和 mouseleave 事件。 //3. 注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。 // $('.dropdown').hover(function(){ // $(this).find('.dropdown-toggle').css({ // 'background-color':'#fff', // 'border-color':'#cdd0d4' // }); // $(this).find('.dropdown-arrow').css({ // 'background-image': 'url(img/dropdown-arrow-active.png)' // }); // $(this).find('.dropdown-layer').show(); // },function(){ // $(this).find('.dropdown-toggle').css({ // 'background-color':'', // 'border-color':'#f3f5f7' // }); // $(this).find('.dropdown-arrow').css({ // 'background-image': 'url(img/dropdown-arrow.png)' // }); // $(this).find('.dropdown-layer').hide(); // }); // 第三种方法 // $('.dropdown').hover(function(){ // $(this).addClass('dropdown-active'); // },function(){ // $(this).removeClass('dropdown-active'); // });0
相似问题
老师请帮我看下 下拉菜单有问题
回答 4
老师帮我看下，自己练习下拉有几个问题
回答 7
我用webpack将整个项目打包成主页
回答 2
老师，为什么js代码没有作用
回答 3
整个项目的源代码在哪里啊？
回答 2