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项目“收藏者”和“收藏者项目2” - 这两个是相互叠加的两个项目。

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项目相互堆叠

1 个答案: