2

我创建了一些下拉菜单（如果您将鼠标悬停在其父链接上，则会出现），下拉菜单仅包含链接；没什么特别的。

它们在使用 Google Chrome（在其父浏览器下）时工作得非常好，但在使用 Mozilla Firefox 时它们总是出现在屏幕的最左侧。

有谁知道为什么会发生这种情况？

谷歌浏览器：

谷歌浏览器工作

火狐浏览器：

Mozilla Firefox 不工作

下拉 HTML 检查示例：

下拉 HTML 检查示例

相关CSS：

/* Sub menu styles */
#headermenu td.hasSubMenu ul {
    display: block;
    float: left;
    position: absolute;
    list-style: none;
    min-width: 200px;
    left: -999em;
    padding: 10px 10px;
    text-align: left;
    background-color: #89B0F1;
    z-index: 100;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0px 3px 10px 0px #000000;
}

#headermenu td.hasSubMenu li {
    padding: 10px 5px;
    color: #252B76;
}

#headermenu td.hasSubMenu:hover ul {
    left: 0px;
    top: auto;
}

#headermenu td.hasSubMenu li:hover {
    background-color: #252B76;
    color: #FFFFFF;
}

#headermenu td.hasSubMenu li:hover a {
    color: #FFFFFF;
}

非常感谢您的帮助。:)

4

2 回答 2

2

考虑将下拉菜单列表放在包含菜单项的同一 div 或容器内。相对于菜单项定位并使用绝对定位将下拉菜单推送到菜单项容器下方。我发现这是一种更可靠的方法。例如：

<div style="position:relative;">
    Menu Text
    <div style="position:absolute; bottom:10px; left:0;">
        <ul>
            <li>Sub Menu Item #1</li>
            <li>Sub Menu Item #2</li>
            <li>Sub Menu Item #3</li>
        </ul>
    </div>
</div>

您将不得不调整底部和左侧值以满足您的需求。

于 2013-06-11T11:26:36.727 回答
1

我似乎通过调整一些事情自己解决了这个问题。

left: -999em;我现在不是通过将下拉菜单推离页面（使用）来隐藏下拉菜单，而是在它悬停时使用display: none;然后使用。display: block;然而，这意味着下拉列表被推到其父级右侧 10 个像素；这看起来不正确，为了解决这个left: 0px;问题，我尝试使用 ，但它导致 Firefox 呈现向左的下拉方式重新出现的问题。我试过margin-left: -10px;了，它奏效了。

所以我现在使用的 CSS 看起来像这样：

/* Sub menu styles */
#headermenu td.hasSubMenu ul {
    display: none;
    position: absolute;
    list-style: none;
    min-width: 200px;
    padding: 10px 10px;
    margin-left: -10px;
    text-align: left;
    background-color: #89B0F1;
    z-index: 100;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0px 3px 10px 0px #000000;
}

#headermenu td.hasSubMenu li {
    padding: 10px 5px;
    color: #252B76;
}

#headermenu td.hasSubMenu:hover ul {
    display: block;
}

#headermenu td.hasSubMenu li:hover {
    background-color: #252B76;
    color: #FFFFFF;
}

#headermenu td.hasSubMenu li:hover a {
    color: #FFFFFF;
}
于 2013-06-11T11:50:57.507 回答