HTML / CSS：在父菜单而非父项旁边显示子菜单

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标签。