绝对位置将列表元素分成新行

Question

我正在尝试在 wordpress 中自定义导航菜单。我希望我的子菜单出现在父菜单元素下方的一行中。我还将子菜单位置设置为绝对，以便我可以控制主菜单栏和子菜单栏的重叠。

下面是我最小化的 CSS（在 SASS 中，为了清楚起见，我只发布我认为相关的那些部分）。

问题：一切正常，除了子菜单项现在分成几行，而不是单行。

观察：如果我删除绝对定位或者我给出一个固定的宽度，那么它就可以工作。

我尝试过：放置空格：nowrap 和 display:inline-block (in li)，虽然我知道显示对于绝对定位没有意义。

.menu-primary-menu-container {
    &>ul {
        float:left;
        list-style: none;
        &>li {
            position: relative;
            float:left;
            &>ul {
                position: absolute;
                height: 40px;
                bottom: -30px;
                list-style: none;

                &>li {
                    float:left;
                }
            }
        }
    }
}

Answer 1

您必须指定子菜单的宽度才能使其正常工作：JSFiddle

.menu-primary-menu-container {
    &>ul {
        float:left;
        list-style: none;
        &>li {
            position: relative;
            float:left;
            &>ul {
                position: absolute;
                height: 40px;
                bottom: -30px;
                list-style: none;
                width: 500px;

                &>li {
                    float:left;
                }
            }
        }
    }
}

如果您使用position: absolute; 没有宽度或没有指定left 和 right，元素将使用尽可能小的宽度。