用【图标文字】的方法设置下拉箭头，出现的是方框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕淘网</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.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:;" 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="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow icon icon-04xialajiantou transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow icon icon-04xialajiantou transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow icon icon-04xialajiantou transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li>
</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link">联系客服<i class="dropdown-arrow icon icon-04xialajiantou transition"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-3.3.1.js"><\/script>')
</script>
<script src="js/dropdown.js"></script>
<script src="js/index.js"></script>
</body>
</html>/*公共样式*/
.container{
width: 1200px;
margin:0 auto;
}
.link{
color: #4d555d;
}
.link:hover{
color: #f01414;
}
.transition{
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
/*icon*/
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot?t=1524729393882'); /* IE9*/
src: url('font/iconfont.eot?t=1524729393882#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('font/iconfont.ttf?t=1524729393882') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('font/iconfont.svg?t=1524729393882#iconfont') format('svg'); /* iOS 4.1- */
}
.icon{
font-family:"iconfont" !important;
font-size:14px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*.icon-gouwuchekong:before { content: "\f0179"; }
.icon-gouwucheman:before { content: "\344b"; }*/
/*.icon-04xialajiantou:before { content: "\e604"; }*/
/*dropdown*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
line-height: 1px;
vertical-align: middle;
}
.dropdown-layer{
z-index: 1;
display: none;
position: absolute;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
[class*="-active"] .dropdown-arrow{
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*menu dropdown*/
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
/*width: 8px;
height: 6px;*/
background-color: yellow;
margin-left: 5px;
}
.menu .dropdown-layer{
top: 42px;
background: #fff;
border: 1px solid #cdd0d4;
}
.menu .menu-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.menu .menu-item:hover{
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
.menu-active .dropdown-layer{
display: block;
}/*nav-site*/
.nav-site{
width: 100%;
background: #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;
}
.nav-site-service{
margin-right: 15px;
}
/*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;*/
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
z-index: 1;
display: none;
position: absolute;
top: 42px;
background: #fff;
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;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.dropdown-item:hover{
background-color: #f3f5f7;
}
/*.dropdown-active .dropdown-toggle,*/
.dropdown:hover .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
/*.dropdown-active .dropdown-arrow,*/
/*.dropdown-active .dropdown-layer,*/
.dropdown:hover .dropdown-layer{
display: block;
}/*index.js*/
$('.dropdown').dropdown();22
收起
正在回答
3回答
你好，首先需要有如下下载的font文件，认真检查下路径是否正确；
路径正确的话，这里测试是可以实现效果的，例：
祝学习愉快~
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星