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

Question

我正在创建一个2层下拉菜单和子菜单，并且我遇到了定位，相对或绝对，或浮动的问题。我已经绝对玩了，空间/间隙消失了，但是我的子菜单不会在悬停的项目旁边飞出，只有第一个。我尝试了亲戚和漂浮都产生了不希望的差距，但子菜单在我想要的悬停项目旁边飞出来。这是我认为存在问题的代码。 注意，我创建了一个JSFIDDLE，因此您可以看到工作代码示例：

这里是包含HTML和CSS的JSFIDDLE。我把代码有差距，但有正确的飞出定位。如果我需要更清楚地澄清事情，请告诉我，我会尝试。

有问题的代码 - 我认为

.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;
}

Answer 2

只需给你的.sub-navigation-content班级绝对定位而不是亲戚。

.sub-navigation-content {
  position: absolute;
}

您肯定也会将顶部调整为至少具有0的值。