老师看下我的代码
来源：2-1 项目准备及编写HTML基本结构
菜鸟00001
2019-05-07 17:48:22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" 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-logoin">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
<li class="fl link"><a href="#" target="_blank" id="nav-site-mobile" 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-left">
<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 type="text/javascript" src="js/jquery.js"></script> 本地引入jquery-->
<!--<script type="text/javascript" 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-1.7.1.min.js"><'+'/script>')
window.jQuery||document.write('<script src="js/jquery.js"><\/script>')
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
/*公共样式*/
.container{/*站点导航*/width:1200px;margin:0 auto;}
a.link{/*链接正常颜色*/color:#4d555d;}
a.link:hover{/*链接经过的颜色*/color:#f01414 !important;}
/*nav-site*/
.nav-site{/*站点导航整体设置*/
width:100%;
background-color:#f3f5f7;
}
.nav-site .container{/*站点内容块整体设置*/
height:44px;
line-height:44px;
border-bottom:1px solid #cdd0d4;
}
.nav-site-logoin{/*站点导航 亲，请登录设置*/
margin-left:15px;
color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{/*站点导航“注册和手机购买”设置*/
margin-left:10px;
}
.nav-site-category{margin:0 10px;}
.nav-site-service{margin-left:15px;}
/*下拉菜单样式*/
.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-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{/*下拉菜单显示*/
background-color:#fff;
border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow{
background:url(../img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer{
display:block;
}
/*第三种下拉菜单显示隐藏*/
.dropdown:hover .dropdown-toggle{background-color:#fff;border-color:#cdd0d4;}
.dropdown:hover .dropdown-arrow{background:url(../img/dropdown-arrow-active.png);}
.dropdown:hover .dropdown-layer{display:block;}
/*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,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;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;}
下拉有点问题，老师您看下 我用的第一种和第二种方法都没有问题，用到第三种的时候出现了问题
1回答
-
好帮手慕码
2019-05-07
同学你好！
请问同学问的是这里吗？
老师这边测试下拉的隐藏显示是没有问题的~
同学可以再把问题描述的清楚一点，在问答区进行提问哦~
如帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题