title: Drop down menu overlapping other menu
body: <p>I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.</p>
  
  <p>This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.</p>
  
  <p><a href="https://i.stack.imgur.com/jvO57.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jvO57.png" alt="This picture shows the overlap."></a></p>
  
  <p>I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.</p>
  
  <p><a href="https://jsfiddle.net/cc6cv0e5/2/" rel="nofollow noreferrer">JSFiddle</a> shows the problem.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/Default.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Webpages/Stats/Graph.aspx"&gt;Stats&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="/Webpages/Stats/Graph.aspx"&gt;Graph&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/Webpages/Stats/DataSheet.aspx"&gt;DataSheet&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/Webpages/Stats/Print.aspx"&gt;Print&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Add&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Edit&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/Webpages/Employees.aspx"&gt;Employees&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Add&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Edit&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Webpages/About.aspx"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;aside&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;Graph&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Data sheet&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Print graph&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>nav {
    background: black;
    width: auto;
    height: 50px;
    font-weight: bold;
  }
  
  nav ul {
    list-style: none;
  }
  
  nav ul li {
    height: 50px;
    width: 125px;
    float: left;
    line-height: 50px;
    background-color: #000;
    text-align: center;
    position: relative;
  }
  
  nav ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
  }
  
  nav ul li a:hover {
    background-color: #ff6a00;
  }
  
  nav ul ul {
    position: absolute;
    display: none;
  }
  
  nav ul li:hover &gt; ul {
    display: block;
  }
  
  aside {
    float: left;
    width: 200px;
    height: 700px;
    background: grey;
  }
  
  aside input {
    background-color: red;
  }
  
  aside ul {
    list-style: none;
    /*no bulets*/
    height: 100%;
  }
  
  aside ul li {
    height: 50px;
    width: 100%;
    float: left;
    border-bottom: 1px solid black;
    line-height: 50px;
    text-align: center;
    position: relative;
  }
  
  aside ul li a {
    text-decoration: none;
    width: 100%;
    color: #fff;
    display: block;
  }
  
  aside ul li a:hover {
    background-color: #ff6a00;
    display: block;
  }
  </code></pre>