title: CSS making nested UL in LI of parent UL display in proper position on parent LI hover
body: <p>It's a nav menu with ULs nested in a parent UL. When hovering over an LI of the parent UL (orange in the image below), the nested UL (green in the image below_ should display right below the LI. </p>
  
  <p>Here <a href="http://jsfiddle.net/stubflub/cbavfv3j/3/" rel="nofollow noreferrer">is the fiddle</a></p>
  
  <p><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>.clearer {
      clear: both;
  }
  body {
      font-family: sans-serif;
      font-size: 13px;
      margin: 0;
      padding: 0;
      position: relative;
      vertical-align: baseline;
  }
  div#header {
      background: none repeat scroll 0 0 #101816;
      float: left;
      height: 56px;
      margin: 0;
      padding: 0;
      width: 320px;
  }
  div#header-content-container {
      height: 100%;
      margin: 0;
      padding: 0;
      width: 320px;
  }
  a#logo {
      background: blue;
      background-image: none;
      box-shadow: none;
      float: left;
      height: 38px;
      margin: 9px 0 0 6px;
      width: 238px;
  }
  #top-nav-container {
      margin: 0 0 0 264px;
      position: absolute !important;
  }
  nav {
      background-color: #3e4f4c;
      height: 56px;
      margin: 0;
      width: 56px;
  }
  nav a#menu_button {
      background: #3e4f4c;
      display: block;
      font-size: 30px;
      height: 56px;
      margin: 0;
      padding: 0;
      text-align: center;
      width: 56px;
  }
  nav ul {
      background: black repeat-y scroll 0 0 transparent;
      border-radius: 0;
      box-shadow: none;
      display: block;
      left: -184px;
      list-style: outside none none;
      margin: 0;
      padding: 0;
      position: absolute !important;
      width: 240px;
  }
  nav ul li:first-child {
      border-top: medium none;
  }
  nav ul li:last-child {
      border-bottom: medium none;
  }
  nav ul li:last-child:hover {
      background: none repeat scroll 0 0 #3e4f4c;
  }
  nav ul li {
      background: #3e4f4c;
      border-bottom: 1px solid #191b1a;
      border-top: 1px solid #697774;
      display: block;
      float: none;
      height: 48px;
      margin: 0 0 0 10px;
      position: relative;
      text-align: left;
      width: 230px;
  }
  nav ul li a {
      color: #eee;
      display: block;
      font-size: 13px;
      padding: 16px 0 15px 15px;
      position: relative;
      text-decoration: none;
  }
  nav ul ul {
      background: black repeat-y scroll 0 0 transparent;
      border-radius: 0;
      box-shadow: none;
      display: none;
      left: -10px;
      list-style: outside none none;
      padding: 0;
      position: relative !important;
      top: 0;
      width: 240px;
  }
  nav ul li:first-child {
      border-top: medium none;
  }
  nav ul ul li {
      background: none repeat scroll 0 0 green;
      border-bottom: 1px solid red;
      display: block;
      float: none;
      height: 38px;
      margin: 0 0 0 10px;
      position: relative;
      text-align: left;
      width: 230px;
  }
  nav ul ul li a {
      color: #fff;
      display: block;
      padding: 0;
      position: relative;
      text-decoration: none;
  }
  nav ul li:hover a.top {
      background: #d8a900;
      color: black;
  }
  nav ul li:hover &gt; ul {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="header"&gt;
          &lt;div id="header-content-container"&gt; &lt;a href="/" title="Logo" id="logo"&gt;Logo!&lt;/a&gt;
              &lt;div id="top-nav-container"&gt;
                  &lt;nav&gt;
                      &lt;a id="menu_button"&gt;&lt;/a&gt;
                      &lt;ul class="top"&gt;
                          &lt;li&gt;
                              &lt;a class="top" href="/"&gt;HOME&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a class="top" href="#"&gt;SERVICES&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item AAAAAAAAA&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item AAAAAAAAAAAAAAA&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item AAAAAAA&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item AAAAAAAAA&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item AAAAAAAAAAAAAAAA&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item AAAAAAAAAAA&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item AAAAAAAAAAAAAA&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a class="top" herf="#"&gt;LIBRARY&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a class="top" href="#"&gt;CONTACT&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item BBBBBBBBBBBBB&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item BBBBBBB&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Item BBBB&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;/li&gt;&lt;!-- extra li for styling later --&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clearer"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/ilwzO.png" alt="This is an image of the wrong (current) and correct way should be displayed"></p>