title: CSS li items stacking on top each other
body: <p>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.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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; }  
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;nav id="nav-mobile"&gt;
  
  &lt;ul id="vertnav"&gt;
   &lt;li class="favoritter open expanded" style="display: list-item;"&gt;
      &lt;span class="vertnav-cat"&gt;&lt;a href="#"&gt;&lt;span&gt;Favoritter&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
    &lt;ul&gt;
      &lt;li class="mest-solgte expanded" style="display: list-item;"&gt;
        &lt;span class="vertnav-cat"&gt;&lt;a href="#"&gt;&lt;span&gt;mest solgte&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li class="vi-anbefaler expanded" style="display: list-item;"&gt;
        &lt;span class="vertnav-cat"&gt;&lt;a href="#"&gt;&lt;span&gt;Vi anbefaler&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li class="favoritter open expanded" style="display: list-item;"&gt;
          &lt;span class="vertnav-cat"&gt;&lt;a href="#"&gt;&lt;span&gt;Favoritter item2&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;ul&gt;
          &lt;li class="item1 expanded" style="display: list-item;"&gt;
            &lt;span class="vertnav-cat"&gt;&lt;a href="#"&gt;&lt;span&gt;item1&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;        
          &lt;/li&gt;
          &lt;li class="item2 expanded" style="display: list-item;"&gt;
            &lt;span class="vertnav-cat"&gt;&lt;a href="#"&gt;&lt;span&gt;item2&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Look at the LI items "Favoritter" and "Favoritter item2" - these are the two that stack on top of each other.</p>