老师，我的项目放在wampserver下运行，下拉箭头找不到图片
<!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下
13
收起
正在回答
3回答
同学你好，使用同学提供的代码，没有进行任何改动，在鼠标移入再移出菜单时，箭头是有的，如下：
同学测试的代码是和上传的代码哪里不一样吗？如果不一样的话，要把不一样的代码上传一下，老师帮助测试。祝学习愉快~
qq_勿忘初心_H
2020-04-20 22:33:40
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');
// });相似问题
请问在gitbash中如何用上下箭头进行选项更换啊
65
0
7
老师请帮我看下 下拉菜单有问题
18
1
5
下拉箭头翻转不了
9
0
2
as里的界面显示正常，在模拟器中显示已停止运行
0
0
4
老师我这图片下载不了
31
0
9
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星