无法使用CSS创建下拉菜单？李所有在彼此之上？

Question

我在这里遵循这个教程 - 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％的顶部然而再次，它们都在1个位置没有堆叠。我该如何解决这个问题？

我最终将实施向下滑动下拉菜单。我怎么能正确地做到这一点？

Answer 1

当你对你的li应用绝对位置时，你有效地在所有li元素上设置完全相同的位置（因此它们保持在彼此之上）。

这是因为位置绝对元素在DOM中没有权重，所以可以通过这种定位将元素叠加在一起。

尝试设置

position: relative;

关于你的元素。这将赋予元素重量并有效地阻止它们彼此叠加。