下拉菜单的实现
来源：5-2 作业题
慕仙0328516
2018-11-25 16:16:42
<!DOCTYPE HTML>
<html>
<head>
<title>慕淘网</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
/*公共样式*/
.wrap{
width:1200px;
margin:0 auto;
position:relative;
overflow:hidden;
}
/*清除浮动，谁浮动了就在父元素上加一个clearfix的类*/
.clearfix:after{
content:" ";
display:block;
height:0;
line-height:0;
clear:both;
zoom:1;
}
a{
text-decoration: none;
}
select,input{
border:none;
outline:none;
}
/*头部区域*/
.header{
background:#f3f5f7;
padding-bottom: 20px;
}
.header .wrap{
border-bottom: 1px solid #cdd0d4;
}
.header a{
display:inline-block;
line-height: 38px;
font-size:12px;
color:#71b4e3;
}
.header a:hover{
color:red;
}
.pull:hover{
color:red;
}
.pull{
display: inline-block;
line-height: 38px;
font-size:12px;
color:#71b4e3;
cursor: pointer;
padding-right:16px;
float:right;
background:url(material/icon/21.png) no-repeat right center;
margin-right:16px;
position: relative;
}
.pull-list{
position: absolute;
width: 52px;
line-height: 38px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left: 2px;
top: 38px;
z-index: 2;
}
.pull-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.pull-list a:hover{
background-color: #f3f5f7;
}
/*logo区域*/
.logo{
background:#f3f5f7;
padding-bottom: 20px;
}
.mooctao{
width:150px;
height:52px;
padding:16px 12px;
display: inline-block;
}
.mooctao img{
width:100%;
height:100%;
}
.search{
width:600px;
height:36px;
position:absolute;
top:24px;
left:300px;
}
.searchBox{
width:72px;
height:36px;
position:absolute;
top:24px;
left:900px;
background: #07111b;
color:white;
cursor:pointer;
}
.logo .car{
float:right;
display:inline-block;
height: 20px;
line-height: 20px;
background-color:red;
margin-top:24px;
margin-right: 16px;
width:120px;
padding:8px 2px 8px 20px;
color:white;
font-size:12px;
position:relative;
}
.logo .car span:nth-child(1){
width:16px;
height:16px;
display: inline-block;
position: absolute;
left:6px;
top:10px;
}
.logo .car span:nth-child(2){
width:10px;
height:10px;
display: inline-block;
position: absolute;
right:20px;
top:10px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jQuery/jquery.js"></script>
</head>
<body>
<div class="header">
<div class="wrap">
<a href="#" class="login" id="loginLink">亲，请登录</a>
<a href="#" class="rege" id="regeLink">免费注册</a>
<a href="#" class="hang">手机逛慕淘</a>
<div class="pull">联系客服</div>
<div class="pull">卖家中心</div>
<div class="pull">商品分类</div>
<div class="pull">收藏夹</div>
<div class="pull">
<div class="pull-header">我的慕淘</div>
<div class="pull-list">
<a href="#">已购买的宝贝</a>
<a href="#">我的足迹</a>
</div>
</div>
</div>
</div>
<div class="logo">
<div class="wrap clearfix">
<a href="#" class="mooctao"><img src="material/logo.png"></a>
<input type="text" class="search" placeholder="灵魂美食一元抢">
<input type="button" class="searchBox" value="搜索">
<a href="#" class="car clearfix"><span><img src="material/icon/26.png"></span> 购物车 | 0 <span><img src="material/icon/23.png"></span></a>
</div>
</div>
</body>
</html>
为什么鼠标下拉菜单pull-list没有显示出来呢
怎么实现鼠标移入我的慕淘下拉菜单显示出来好呢
2回答
-
慕仙0328516
提问者
2018-11-26
老师快帮忙改项目作业，要到期了
0 -
好帮手慕星星
2018-11-26
是wrap盒子设置了超出隐藏：
去掉就可以了，可以设置下拉菜单本身隐藏，添加鼠标移入pull上显示出下拉菜单：
自己测试下，祝学习愉快！
0
相似问题