jquery - 无法使用CSS创建下拉菜单？都彼此顶着？

我在这里遵循本教程-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个未堆叠的地方。我怎样才能解决这个问题？

我最终将实现下拉菜单。如何正确执行此操作？

最佳答案

当您对li施加绝对位置时，实际上是在所有li元素上设置了完全相同的位置（因此它们彼此重叠）。

这是因为位置绝对元素在DOM中没有权重，因此通过这种定位可以将元素彼此堆叠。

尝试设定

position: relative;

在您的li元素上。这将赋予元素重量，并有效地防止它们相互重叠放置。