顶部右侧，下拉菜单效果为什么无法实现？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5-2</title>
<link rel="stylesheet" type="text/css" href="css/5-2zuoye.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="js/5-2zuoye.js"></script>
</head>
<body>
<!-- 大容器 -->
<div class="wrap">
<!-- 设置container是为了设置背景颜色 -->
<div class="container">
<!-- 顶部区 -->
<div class="header">
<ul class="headerleft">
<li class="dropdown-menu" id="one"><a href="#">亲，请登录</a></li>
<li class="dropdown-menu"><a href="#">免费注册</a></li>
<li class="dropdown-menu"><a href="#">手机逛慕淘</a></li>
</ul>
<ul class="headerright">
<li class="dropdown-menu1 menu1">
<a href="#">我的慕淘</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>已买到的宝贝</li>
<li>我的慕淘</li>
</ul>
</li>
<li class="dropdown-menu1"><a href="#">收藏夹</a><img src="sucai/icon/21.png"></li>
<li class="dropdown-menu1"><a href="#">商品分类</a></li>
<li class="dropdown-menu1"><a href="#">卖家中心</a><img src="sucai/icon/21.png"></li>
<li class="dropdown-menu1"><a href="#">联系客服</a><img src="sucai/icon/21.png"></li>
</ul>
</div>
<!-- logo区 -->
<div class="logo"></div>
</div>
<!-- 导航 -->
<div class="nav"></div>
<!-- banner区 -->
<div class="banner"></div>
<!-- 右导航 -->
<div class="rightsidebar"></div>
<!-- 楼层区 -->
<div class="louceng"></div>
<!-- 友情链接 -->
<div class="lianjie"></div>
<!-- 页脚 -->
<div class=footer""></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
/* 大容器 */
.wrap{
width: 100%;
}
/* container */
.container{
width: 100%;
background: #f3f5f7;
overflow: hidden;
zoom: 1;
}
/* header区 */
.header{
width: 70%;
margin: 0 auto;
border-bottom: 1px solid #C0C0C0;
height: 44px;
}
.headerleft,.headerright{
overflow: hidden;
zoom: 1;
height: 44px;
line-height: 44px;
}
.headerleft{
float: left;
}
.headerright{
float: right;
}
.dropdown-menu{
float: left;
font-size: 10px;
padding-left: 15px;
}
.dropdown-menu a,.dropdown-menu1 a{
color: gray;
}
#one a{
color: red;
}
.dropdown-menu a:hover{
color: red;
}
.dropdown-menu1{
float: left;
font-size: 10px;
padding-left: 20px;
}
.menu1{
position: relative;
height: 44px;
}
.dropdown-menu3{
position: absolute;
top: 44px;
display: none;
z-index: 999;
}
.menu1 a:hover .dropdown-menu3{
display: block;
}0
收起
正在回答
2回答
你好，代码中的问题：
1、因为在父元素中设置了固定的高度44px，所以需要将超出隐藏属性去掉，否则超出的部分是显示不出来的：
2、a标签与ul标签是兄弟的关系不是后代的关系，所以需要使用~连接：
可以修改测试下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星