title: HTML/CSS: show submenu next to parent MENU, not parent item
body: <p>I have a three-level navigation, the third level (sub-submenu) displays when hover on the second one (submenu).</p>
  
  <p>The sub-submenu appears relative to the parent item. But I want it to appear simply next to the submenu, so always on the same place, regardless which submenu-item gets hovered. So the first item of the sub-submenu (e.g. "Second-One") is always on the same height as the first item of the submenu ("First")</p>
  
  <p>Here is a JSFiddle for my actual status: <a href="http://jsfiddle.net/fc0rwbqu/" rel="nofollow">http://jsfiddle.net/fc0rwbqu/</a></p>
  
  <p>Thanks in advance!</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
  &lt;li&gt;Home&lt;/li&gt;
  &lt;li&gt;Numbers
      &lt;ul&gt;
          &lt;li&gt;First
              &lt;ul&gt;
                  &lt;li&gt;First-One&lt;/li&gt;
                  &lt;li&gt;First-Two&lt;/li&gt;
                  &lt;li&gt;First-Three&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;Second
              &lt;ul&gt;
                  &lt;li&gt;Second-One&lt;/li&gt;
                  &lt;li&gt;Second-Two&lt;/li&gt;
                  &lt;li&gt;Second-Three&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;Third
              &lt;ul&gt;
                  &lt;li&gt;Third-One&lt;/li&gt;
                  &lt;li&gt;Third-Two&lt;/li&gt;
                  &lt;li&gt;Third-Three&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#nav {
  position: relative}
  
  #nav li a,#nav li { float:left;
  margin-left: 20px;
  background-color: #ddd;}
  
  #nav li {
  list-style:none;
  position:relative;}
  
  #nav li ul {
  display:none;
  position:absolute;
  left:0; width: 100px;
  top:90%;
  padding:0;
  margin:0;}
  
  #nav li:hover &gt; ul {
  display:block;}
  
  #nav li ul li {
  float:none;
  height: 35px;
  min-width: 100px; 
  line-height: 35px;
  border-right: 0;
  display:block;}
  
  #nav li ul li ul {
  display:none; margin: 0 0 0 10px; 
  width: 100px; z-index:9999; 
  float: left !important; overflow: display; 
  background-color: #f06;}
  
  #nav li ul li:hover ul {
  left: 100px;
  top:0;}
  </code></pre>