CSS li 项目相互堆叠

Question

我正在构建一个移动菜单，但我的列表项试图意外地堆叠在一起。我想我可以以某种方式设置到顶部的相同距离或类似的距离，因为它们相互堆叠但似乎无法找到并解决问题。

CSS:

nav#nav-mobile {
    position: relative;            
    display: none; }
nav#nav-mobile ul#vertnav li{
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    z-index: 99;
    opacity: 0.8;
    background-color: #000; }
nav#nav-mobile ul#vertnav li ul {
    display: none;
 }
nav#nav-mobile li{
    display: block;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: solid 1px #000; }
nav#nav-mobile li:last-child {
    border-bottom: none; }
nav#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 30px; }
nav#nav-mobile a:hover {
    background-color: #000;
    color: #fff; }
#nav-trigger {
    display: block; }
.topnav {
    display: none; }
nav#nav-mobile { 
    display: block; }  
}

HTML:

<nav id="nav-mobile">

<ul id="vertnav">
 <li class="favoritter open expanded" style="display: list-item;">
    <span class="vertnav-cat"><a href="#"><span>Favoritter</span></a></span>
  <ul>
    <li class="mest-solgte expanded" style="display: list-item;">
      <span class="vertnav-cat"><a href="#"><span>mest solgte</span></a></span>

    </li>
    <li class="vi-anbefaler expanded" style="display: list-item;">
      <span class="vertnav-cat"><a href="#"><span>Vi anbefaler</span></a></span>
    </li>
  </ul>
 </li>
 <li class="favoritter open expanded" style="display: list-item;">
        <span class="vertnav-cat"><a href="#"><span>Favoritter item2</span></a></span>
      <ul>
        <li class="item1 expanded" style="display: list-item;">
          <span class="vertnav-cat"><a href="#"><span>item1</span></a></span>        
        </li>
        <li class="item2 expanded" style="display: list-item;">
          <span class="vertnav-cat"><a href="#"><span>item2</span></a></span>
        </li>
      </ul>
 </li>
</ul>
</nav>

查看 LI 项目 "Favoritter" 和 "Favoritter item2" - 这两个相互堆叠。

Answer 1

因为父li是绝对定位的。

删除那个。

nav#nav-mobile ul#vertnav li {
    display: none;
    list-style-type: none;
    /*
    position: absolute;
    left: 0;
    right: 0;
    */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    z-index: 99;
    opacity: 0.8;
    background-color: #000;
}

JSFiddle Demo

CSS li 项目相互堆叠

CSS li items stacking on top each other

html

css

html-lists