HTML/CSS : show submenu next to parent MENU, 不是父项

Question

我有一个三级导航，当悬停在第二级(子菜单)上时显示第三级(子子菜单)。

子子菜单相对于父项出现。但我希望它出现在子菜单旁边，所以总是在同一个地方，不管哪个子菜单项被悬停。因此子子菜单的第一项(例如“Second-One”)始终与子菜单的第一项(“First”)处于相同高度

这是我实际状态的 JSFiddle:http://jsfiddle.net/fc0rwbqu/

提前致谢!

代码:

<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

像这样的？？ http://jsfiddle.net/fc0rwbqu/1/Appled position: relative 到 ul 标签。