Question

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

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

问题：除了子菜单项现在分成行而不是一行之外，一切都工作正常。

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

我尝试了什么：放置空格：nowrap和display：inline-block（在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，则该元素将使用尽可能小的宽度。

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

1 个答案: