html.de - Submenu Elemente verschieben sich

HTML

<nav>
<ul>
 <li><a href="#">Menuitem1</a>
  <ul>
   <li><a href="#">Submenu-Item1</a></li>
   <li><a href="#">Submenu-Item2</a></li>
   </ul>
 </li>

 <li><a href="#">Menuitem2</a>
  <ul>
   <li><a href="#">Submenu-Item1</a></li>
   <li><a href="#">Submenu-Item2</a></li>
  </ul>
 </li>
</ul>
</nav>

CSS

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 box-sizing:border-box;
}

nav {
 float:left;
 width:100%;
 background:#eee;
}

nav ul li {
 float:left;
 position:relative;
 padding:0;
}

nav li a {
 display:inline-block;
 color:#000;
 padding:10px 40px;
}      
 
nav a:hover {
 background:#dda;
}                     
nav ul ul {
 position:absolute;
 top: -9999em;
 left:-9999em;
} 

nav ul ul li {
 display:block;
 padding:0 0;
}

nav li:hover ul {
 left:0;
 top:auto;
  background:#aaa;
}