title: CSS Submenu Li's overlapping
body: <p>I have tried many changes but none of them work, i also search in Stackoverflow but i couldn't put it working correctly.</p>
  
  <p>The 'li' inside the submenu 'ul' are overlapping in just one sub item instead of showing the 4 sub items.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;ul class="menu-list"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu Item 2&lt;/a&gt;
                              &lt;ul class="menu-sub-list"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-menu Item 1&lt;/a&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-menu Item 2&lt;/a&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-menu Item 3&lt;/a&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-menu Item 4&lt;/a&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu Item 5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#menu {
      margin: 3% 0;
      background-color: rgb(255,138,61);
      height: 70px;
  }
  #menu ul.menu-list {
      list-style: none;
      text-align: center;
      line-height: 70px;
      height: 70px;
      display:block;
      clear:both;
  }
  #menu ul.menu-list li {
      display: inline-block;
      padding: 0 20px;
      text-transform: uppercase;
      font-size: 1.05em;
      height: 70px;
      position:relative;
  }
  #menu ul.menu-list li:hover {
      background-color: rgb(255,102,0);
  }
  #menu a {
      color: #fff;
      text-decoration: none;
      display:block;
  }
  #menu ul.menu-list ul.menu-sub-list {
      display: none;
  }
  #menu ul.menu-list li:hover &gt; ul {
      display: block;
  }
  #menu ul.menu-list &gt; li &gt; ul &gt; li {
      overflow: hidden;
      display: block;
      width: 100%;
      padding: 10px;
      text-transform: uppercase;
      font-size: 1.05em;
      height: 70px;
      position: absolute;
      top: 100%;
      left: 0px;
      z-index: 1;
      background: #f2f2f2;
      float: none;
  }
  </code></pre>