Drop down menu overlapping other menu

Question

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.

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.

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.

JSFiddle shows the problem.

HTML:

<nav>
  <ul>
    <li><a href="/Default.aspx">Home</a></li>
    <li><a href="/Webpages/Stats/Graph.aspx">Stats</a>
      <ul>
        <li><a href="/Webpages/Stats/Graph.aspx">Graph</a></li>
        <li><a href="/Webpages/Stats/DataSheet.aspx">DataSheet</a></li>
        <li><a href="/Webpages/Stats/Print.aspx">Print</a></li>
      </ul>
    </li>
    <li><a href="#">Projects</a>
      <ul>
        <li><a href="#">View</a></li>
        <li><a href="#">Add</a></li>
        <li><a href="#">Edit</a></li>
      </ul>
    </li>
    <li><a href="/Webpages/Employees.aspx">Employees</a>
      <ul>
        <li><a href="#">View</a></li>
        <li><a href="#">Add</a></li>
        <li><a href="#">Edit</a></li>
      </ul>
    </li>
    <li><a href="#">Settings</a></li>
    <li><a href="/Webpages/About.aspx">About</a></li>
  </ul>
</nav>

<aside>
  <ul>
    <li><a>Graph</a></li>
    <li><a>Data sheet</a></li>
    <li><a>Print graph</a></li>
  </ul>
</aside>

CSS:

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 > 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;
}

Answer 1

Add z-index to your nav ul element:

nav ul {
    list-style: none; /*no bulets*/
    z-index: 100;
}

Updated Fiddle

For more information about the z-index style and what it does, click here.