html - 如何正确定位我的子下拉菜单？

Question

我正在创建一个 2 层下拉菜单、菜单和子菜单，但我遇到了定位(相对或绝对)和/或 float 的问题。我玩过绝对，空间/间隙消失了，但我的子菜单不会飞出悬停元素旁边，只有第一个。我尝试了相对和 float 都产生了不需要的间隙，但子菜单飞出了我想要的悬停元素旁边。这是我认为问题所在的代码。 注意，我创建了一个 JSFIDDLE，以便您可以看到工作代码示例:

这是JSFIDDLE具有 HTML 和 CSS。我放置的代码有间隙，但具有正确的飞出定位。如果我需要更清楚地澄清事情，请告诉我，我会尽力。

有问题的代码 - 我认为

.sub-navigation-content {
    position: relative;
    margin: 0 0 0 150px;
    top: -10px;
    width: 180px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    visibility: hidden;
    box-shadow: 0 5px 10px 0 #999;
}

下面是我希望它看起来像的屏幕截图:

飞出外观正确，但飞出位置不正确:

飞出外观不正确，但飞出位置正确:

提前感谢您的浏览:)

Answer 1

所以...您可以使用绝对位置，但需要删除 top: -10px;。

子导航内容的最终类:

.sub-navigation-content {
    position: absolute;
    margin: 0 0 0 150px;
    width: 180px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    visibility: hidden;
    box-shadow: 0 5px 10px 0 #999;
}

我认为它工作得很好。您可以根据需要通过更改边距将弹出列表移至顶部，即:

.sub-navigation-content {
    position: absolute;
    margin: -35px 0 0 150px;
    width: 180px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    visibility: hidden;
    box-shadow: 0 5px 10px 0 #999;
}