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/ 已将position: relative应用于ul代码。

HTML / CSS：显示父菜单旁边的子菜单，而不是父项

1 个答案: