CODEWITHSUNDEEP
htmlcsshtml-lists
Troels Johannesen
Troels Johannesen

Reputation: 725

CSS li items stacking on top each other

I'm building a mobile menu and my list items are trying to unexpectedly stack on top of each other. I imagine that I can somehow set the same distance to the top or something like that since they stack on top of each other but can't seem to find and fix the issue.

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>

Look at the LI items "Favoritter" and "Favoritter item2" - these are the two that stack on top of each other.

Upvotes: 0

Views: 13570

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

It's because the parent li are positioned absolutely.

Remove that.

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

Upvotes: 3

Related Questions