2

我正在创建一个 2 层下拉菜单和子菜单，并且在定位、相对或绝对和或浮动方面遇到问题。我玩过绝对，空间/间隙消失了，但我的子菜单不会飞出悬停项目旁边，只有第一个。我尝试了 relative 和 float 都产生了不希望的间隙，但是子菜单飞出我想要的悬停项目旁边。这是我认为问题所在的代码。请注意，我创建了一个 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;
}

以下是我希望它看起来像的屏幕截图：

正确的飞出，但不正确的飞出位置：

在此处输入图像描述

外观不正确的飞出，但正确的飞出位置：

在此处输入图像描述

提前感谢您查看:)

4

2 回答 2

4

So So ...您可以使用绝对位置，但您需要 remove 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;
}
于 2013-06-02T17:19:30.427 回答
0

只需给您的.sub-navigation-content班级一个绝对定位而不是相对定位。

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

您肯定还会将顶部调整为至少具有0.

于 2013-06-02T17:08:07.873 回答