Html Firefox的下拉菜单未显示在正确的位置_Html_Css_Firefox

Html Firefox的下拉菜单未显示在正确的位置

html css firefox

Html Firefox的下拉菜单未显示在正确的位置,html,css,firefox,Html,Css,Firefox,我已经创建了一些下拉菜单（如果您将鼠标悬停在其父链接上，就会出现这些菜单），这些下拉菜单只包含链接；没什么特别的当使用Google Chrome（在其父代浏览器下）时，它们工作得非常好，但当使用Mozilla Firefox时，它们总是出现在屏幕的最左侧有人知道为什么会发生这种情况吗谷歌浏览器： /* Sub menu styles */ #headermenu td.hasSubMenu ul { display: block; float: left; posi

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

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

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

谷歌浏览器：

/* 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;
}

/* 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;
}

Mozilla Firefox:

/* 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;
}

/* 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;
}

下拉HTML检查示例：

/* 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;
}

/* 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;
}

相关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;
}

/* 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;
}

非常感谢您的帮助。：）

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


菜单文本

子菜单项#1
子菜单项#2
子菜单项#3

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

我似乎已经通过调整一些东西解决了这个问题

我现在使用的是

display:none然后使用显示：块当它悬停在上面时。然而，这意味着下拉菜单被推到父菜单右侧10个像素；看起来不对，为了解决这个问题，我尝试使用left:0px，但这导致Firefox将下拉方式呈现到左侧以重新出现问题。我尝试了左边距：-10px成功了
因此我现在使用的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;
}

/* 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;
}

请不要用桌子吃饭layouts@ErikMes在这种情况下，这是实现我需要做的事情的唯一途径。