HTML/CSS: show submenu next to parent MENU, not parent item - html

Question

I have a three-level navigation, the third level (sub-submenu) displays when hover on the second one (submenu).
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")
Here is a JSFiddle for my actual status: http://jsfiddle.net/fc0rwbqu/
Thanks in advance!
Code:
<ul id="nav">
<li>Home</li>
<li>Numbers
<ul>
<li>First
<ul>
<li>First-One</li>
<li>First-Two</li>
<li>First-Three</li>
</ul>
</li>
<li>Second
<ul>
<li>Second-One</li>
<li>Second-Two</li>
<li>Second-Three</li>
</ul>
</li>
<li>Third
<ul>
<li>Third-One</li>
<li>Third-Two</li>
<li>Third-Three</li>
</ul>
</li>
</ul>
</li>
CSS:
#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 > 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;}

Answer 1

Something like this?? http://jsfiddle.net/fc0rwbqu/1/
Appled position: relative to ul tag.