老师，有几个疑问
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单封装</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<style type="text/css">
/*dropdown公共的*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
z-index: 1;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
/*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-image: url(img/dropdown-arrow.png);
margin-left: 8px;
}
.dropdown-layer{
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
height: 30px;
line-height: 30px;
color: #4d555d;
padding: 0 12px;
white-space: nowrap;
}
.menu-item:hover{
background-color: #f3f5f7;
}
.menu.dropdown-active .dropdown-toggle,
.menu.dropdown:hover .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
.menu.dropdown-active .dropdown-arrow,
.menu.dropdown:hover .dropdown-arrow{
background-image: url(img/dropdown-arrow-active.png);
}
.menu.dropdown-active .dropdown-layer,
.menu.dropdown:hover .dropdown-layer{
display: block;
}
</style>
</head>
<body>
<!-- <div class="dropdown">
<div class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></div>
<div class="dropdown-layer dropdown-left">
</div>
</div> -->
<div class="menu dropdown">
<a href="#" target="_blank" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></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>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('.dropdown').hover(function(){
$(this).addClass('dropdown-active');
},function(){
$(this).removeClass('dropdown-active');
});
</script>
</body>
</html>
1.下拉菜单最外面是一个div标签，div独占一行，导致点击div同行的空白，同样出现下拉菜单，是不是应该给最外层div一个宽度？
2.
.menu .dropdown-toggle{
height: 100%;
}
高度100%怎么理解，感觉挺抽象的，它的父元素.menu.dropdown并没有设置高度啊，这样设置什么意思啊
3.
.dropdown-layer{
top: 100%;
}
视频中老师说.dropdown-layer的top值继承父元素，是继承父元素的高度嘛？如果是，为什么？如果不是，该怎么理解？
正在回答
你好同学，解答如下：
因为你的代码中给菜单的a元素设置成display: block; ，块元素默认宽度是相对浏览器宽度100%显示的，所以a自占一整行，移入这一行任何一个地方都会触发哦。可以设置宽度，直接给dropdown-toggle设置宽度就行。
高度100%就是参照父元素高度进行计算的，例如父元素dropdown高度设置500px，那么子元素高度就是500乘以100%，即也是500px。这个父元素没有设置高度，所以高度100%可以不设置哦
top:100%意思也是参照父元素进行计算，第二个回复已经给同学讲解了如何计算。所以课程中老师说的意思相当于继承了父元素的高度值，但并不是真的继承，只是说100%计算出来的值和父元素高度一样哦。
祝学习愉快，望采纳。
你好同学，解答如下：
1.首先你要明白什么是继承？如果说父元素设置一个top: 100px , 而子元素不用设置top值，也也会有一个top:100px的效果，这样才叫做继承。但是很明显这里子元素已经设置了top:100% ,只不过说值的单位是百分比，这个值是根据父元素计算的。
2.老师在回复的时候，第二条有说到怎么计算。
只不过说，咱们设置的是100%，500px乘以100%恰好等于父元素的高度，所以老师才会说看上去是继承了。或者你可以说这里不能叫做继承，只不过是参照父元素计算出来的值和父元素一样。假如说子元素设置的top值是50%，那么就是500px乘以50% ，即250px，这样不就不相等了么。
3.上次回复已经说了，因为父元素没有设置高度，所以子元素设置百分比没有效果。所以不管是设置高度100%还是top:100%都是没有效果的哦。
祝学习愉快，望采纳。
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星