title: List elements overlapping
body: <p>I'm having troubles with my horizontal menu-bar list items overlapping.</p>
  
  <p>So the <code>ul ul li</code> of the <code>nav div</code> elements overlap, what can I do to stop that?</p>
  
  <p><a href="http://jsfiddle.net/DemonS/kbwtoad3/2/" rel="nofollow noreferrer">The jsfiddle</a></p>
  
  <p>CSS:
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html{
    padding: 0px;
    margin: 0px;
  }
  
  .nav {
    font-family: 'PT Sans', sans-serif;
    width: 100%;
    color: #F5F5F5;
    background: #1565c0;
    display: flex;
    height: 40px;
    padding: 0; 
    margin: 0;
    border: 0;
  }
  
  .nav ul, .nav ul li, .nav{
    list-style: none;
    margin: 0; 
    padding: 0;
    border-bottom: 3px solid #0d47a1;
  }
  
  .nav ul li{
    background: #1565c0;
    width:auto;
    position: relative;
    transition: background 250ms ease-in;
    line-height: 40px;
    display:block;
  }
  
  .nav ul li:hover{
    background: #0d47a1;
  }
  
  .nav ul ul{
    overflow:visible;
    position: absolute;
    visibility: hidden;  
    top: 100%; 
    width: 0%;
  }
  
  .nav ul ul li{
    border:none;
    display:block;
    position: absolute;
    left:0;
    margin:0px;
  }
  
  .nav ul li:hover&gt;ul{
    visibility: visible; 
  }
  
  .nav a{
    text-decoration: none;
    color: inherit;
    margin: 0px 20px;
  }
  
  .nav ul ul li:last-child{
    border-bottom: 3px solid #0d47a1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;Hi there&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a&gt;Here is the awesomeness&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Awesome&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>