下拉菜单没有出现在Firefox的正确位置

Question

我创建了一些下拉菜单（如果将鼠标悬停在其父级链接上，则会显示），下拉菜单只包含链接;没什么特别的。

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

有没有人知道为什么会这样？

Google Chrome：

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>

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

Answer 2

我似乎已经通过调整一些事情来解决这个问题。

不是通过将下拉菜单从页面中移除来隐藏下拉菜单（使用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;
}