不能使用CSS创建下拉菜单吗？我都是一个接一个的？
不能使用CSS创建下拉菜单吗？我都是一个接一个的？
提问于 2016-06-30 10:41:27
我在这里遵循这个教程- http://html-tuts.com/jquery-dropdown-menu/，并且已经尽我所能地实现了他们的css，但是我留下的是我所有的下拉元素(li)堆叠在一起，而不是垂直堆叠。
下面是我的html：
CSS：
.dropDown {
display: block;
margin: auto;
font-family: 'Source Sans Pro', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: rgba(255, 255, 255, 0.4);
padding: 11px 15px;
color: white;
height: 30px;
width: 250px;
cursor: pointer;
font-size: 18px;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
text-decoration: none;
}
.dropDown:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.dropDown a {
text-decoration: none;
color: white;
}
.dropDown > li {
position: absolute;
top: 100%;
left: 0;
}我将li设置为100%的顶部，但是，它们都在一个位置，没有堆叠。我该如何解决这个问题呢？
我最终会实现一个slide down drop。我如何才能正确地执行此操作？
回答 1
Stack Overflow用户
发布于 2016-07-01 03:06:32
当您将位置绝对应用于li时，您实际上是在所有li元素上设置完全相同的位置(因此，它们将彼此重叠在一起)。
这是因为位置绝对元素在DOM中不具有权重，因此可以使用此定位将元素堆叠在彼此的顶部。
尝试设置
position: relative;在你的li元素上。这将赋予元素权重，并有效地阻止它们相互重叠。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38113103
复制相关文章
相似问题
腾讯云开发者
