Question

我有一个下拉菜单，但是下拉菜单不会在其父项目下拉下来。

我的代码可见here

我认为这可能与代码的这一部分有关：

nav ul li ul {
position: absolute;
height: auto;
background-color: #f2f2f2;
}

但我不太确定，所以任何帮助都会受到赞赏......

Answer 1

只需将position:relative添加到nav > ul li，即可确保绝对定位的子菜单将自己相对于他们所属的列表项而不是父ul本身。 / p>

Demo Fiddle

nav > ul li {
    list-style-type: none;
    display: inline;
    vertical-align: top;
    height: 40px;
    line-height: 40px;
    padding: 10px 15px;
    border-right: 2px solid #e6e7e9;
    margin: -2px;
    position:relative;
}

^{*应该注意的是，相对于父项定位的子项与父项位置设置为relative无关，只有定义了定位的父项。}

Answer 2

您需要将父Li定位为相对

nav > ul li {
    list-style-type: none;
    display: inline;
    vertical-align: top;
    height: 40px;
    line-height: 40px;
    padding: 10px 15px;
    border-right: 2px solid #e6e7e9;
    margin: -2px;
    position: relative; /* Add this */
}

JSfiddle Demo

Answer 3

尝试

nav li {
    display: inline;
    position: relative;
}

nav li ul {
    display: none;
    position: absolute;
    padding: 0;
}

导航的父列表项下的子项

3 个答案:

Demo Fiddle