处理网站的菜单，在 Firefox 中发现了一个奇怪的问题。在下面的小提琴中，您可以看到菜单（减去一些样式，但基础知识就在那里）。当您将鼠标悬停在信息按钮上时，子菜单应显示在下方。在 Chrome 和 IE 中，这可以正常工作。在 Firefox 中，菜单卡在左侧。任何想法为什么会发生这种情况以及如何解决它？我认为这可能与 Display: 表有关，结合子菜单的绝对定位，但不确定。
相关的HTML如下：
<li class="item262 parent root">
<span class="daddy item bullet nolink"><span>Information</span></span>
<div class="fusion-submenu-wrapper level2"
style="width:180px;">
<ul class="level2"
style="width:180px;">
<li class="item263"><a class="orphan item bullet"
href=
"/new/index.php?option=com_content&view=article&id=7&Itemid=263">
<span>Choosing a Property</span></a></li>
<li class="item264"><a class="orphan item bullet"
href=
"/new/index.php?option=com_content&view=article&id=8&Itemid=264">
<span>Downloads</span></a></li>
<li class="item265"><a class="orphan item bullet"
href=
"/new/index.php?option=com_content&view=article&id=4&Itemid=265">
<span>FAQs</span></a></li>
<li class="item266"><a class="orphan item bullet"
href=
"/new/index.php?option=com_content&view=article&id=6&Itemid=266">
<span>Moving In</span></a></li>
<li class="item267"><a class="orphan item bullet"
href=
"/new/index.php?option=com_content&view=article&id=5&Itemid=267">
<span>Protecting Your Deposit</span></a></li>
<li class="item268"><a class="orphan item bullet"
href=
"/new/index.php?option=com_content&view=article&id=3&Itemid=268">
<span>Repairs</span></a></li>
</ul>
<div class="drop-bot"></div>
</div>
</li>
CSS是：
.menutop li {height: auto;margin: 0;padding: 0;position: relative;list-style: none;}
.menutop em {font-size: 80%;font-weight: normal;display: block;font-style: normal;}
.menutop li .item, .menutop li.active .item {display: block;margin: 0;text-decoration: none;float: none;width: auto;}
.menutop li .fusion-submenu-wrapper {float: none;left: -999em;position: absolute;z-index: 500;}
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
.menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
/* Root Items */
.menutop {list-style: none;margin: 0;padding: 0;position: relative;line-height: 1em;display:table;table-layout:fixed;font-family:Arial, Helvetica, sans-serif;text-transform:uppercase;width:100%;background:url(../images/menu_border.png) 100% 1px no-repeat;}
.menutop li.root {display:table-cell;background:url(../images/menu_border.png) 0 1px no-repeat;}
.menutop li.root > .item {
white-space: nowrap;
display: block;
padding: 0;
font-size: 14px;
z-index: 610000!important;
cursor: pointer;
position: relative;
margin: 0;
outline: none;
height:60px;
text-align:center;
}
.menutop li.root > .item:hover span, .menutop li.root.f-mainparent-itemfocus > .item span,
ul.level1 li a:hover span, ul.level1 li.root.f-mainparent-itemfocus > .item span{
color:#87B949;
}
.menutop li.root.active > .item , ul.level1 li.root.active{
background-color:#87B949;
text-shadow:1px 1px 1px #333333;
}
.menutop li.root.active > .item span, ul.level1 li.root.active span{
color:#fff !important;
}
.menutop li.root > span.item{cursor:default;}
.menutop li.root > .item span {display: block;margin: 0;outline: none;width: auto;line-height:60px;}
.menutop li.root > .item em {font-size: 10px;display: block;text-transform: lowercase;line-height: 0.3em;}
.menutop li.parent.root .item span {background:url(../images/menu_arrow.gif) 50% 45px no-repeat;}
.menutop li.root .subtext span {line-height: 1.9em;}
.menutop li.root > .item img {margin: 0 4px 0 0;vertical-align: text-bottom;}
/* Dropdown Surrounds */
.menutop ul {padding: 0; margin: 0 0 0 1px; float: left;}
.menutop .drop-bot {height: 1px;overflow: hidden;clear: both;}
.menutop .fusion-submenu-wrapper {height: auto !important;}
.menutop ul.level2 { margin: 1px 0 0 0; text-transform: none;}
ul.level2 li a:hover span {color: #fff;}
/* Dropdown Items */
.menutop ul li {padding: 0;display: block;}
.menutop ul li > .item {
padding: 0;
height: auto;
display: block;
font-size: 1em;
cursor: pointer;
text-align:center;
background-color: #000000;
}
.menutop li.parent.root .level2 li span{background:none;}
.menutop ul li > .item:hover,
.menutop ul li.active > .item,
.menutop ul li.f-menuparent-itemfocus > .item{
background-color: #87B949;
text-shadow:1px 1px 1px #333333;
}
.menutop ul.level3 li > .item:hover,
.menutop ul.level3 li.active > .item,
.menutop ul.level3 li.f-menuparent-itemfocus > .item{
background:#353535;
}
.menutop ul li > .item span {display: block;width: 100%;overflow: hidden;line-height:40px;}
.menutop ul li .item img {float: left;margin: 8px 6px 0 0;vertical-align: top;}
.menutop ul li .nolink span {display: block;}
.menutop ul li span.item {cursor: default;outline: none;}
.menutop ul li .subtext span {line-height: 1.9em;}
.menutop ul li .subtext em {line-height: 0.6em;padding-bottom: 7px;text-transform: lowercase;}
/* No JS */
.menutop li.root:hover > .fusion-submenu-wrapper {left: 0;}
.menutop ul li:hover > .fusion-submenu-wrapper {left: 156px;top: 0;}
/* Fusion JS */
.fusion-js-container {display: block;height: 0;left: 0;overflow: visible;position: absolute;top: 0;z-index: 600000!important;background: transparent !important;}
.fusion-js-subs {display: none;margin: 0;overflow: hidden;padding: 0 !important;position: absolute;}
/* Grouped & Modules */
.menutop .fusion-grouped {padding-bottom: 10px;}
.menutop .fusion-grouped ol {padding: 0;}
.menutop .fusion-grouped ol li {padding: 0 15px;}
.menutop .fusion-grouped ol li .item {padding: 0 15px;}
.menutop .fusion-grouped ol li span {font-size: 85%;line-height: 2em;}
.menutop .type-module ol {padding: 0;}
.menutop .type-module ol li {padding: 0;}
.menutop .type-module ol li .fusion-modules {background: none;}
.menutop .type-module ol li .fusion-module {padding: 0;background: none;overflow: hidden;}
.menutop .fusion-module, .menutop .fusion-modules, .menutop .fusion-grouped {display: block;}
.menutop .fusion-modules.item {padding: 15px;}
.menutop .fusion-module em {display: inline;font-size: inherit;font-style: italic;}
.menutop .fusion-module a {font-size: inherit;line-height: 130%;}
.menutop .fusion-module p, .menutop .fusion-modules p {line-height: 160%;}
.menutop ul li.grouped-parent > .daddy span {background: none;}