html - Firefox 的下拉菜单未出现在正确的位置

Question

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

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

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

谷歌浏览器:

Mozilla Firefox:

下拉 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;
}

非常感谢您的帮助。 :)

Answer 1

考虑将下拉菜单列表放置在包含菜单项的同一 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>

您必须调整底部和左侧的值以满足您的需求。