html - Firefox 中子菜单定位的显示问题

Question

在为站点制作菜单时，发现 Firefox 中存在一个奇怪的问题。在下面的 fiddle 上，您可以看到菜单(减去一些样式，但基本内容都在那里)。当您将鼠标悬停在信息按钮上时，子菜单应显示在下方。在 Chrome 和 IE 中，这工作正常。在 Firefox 中，菜单卡在左侧。任何想法为什么会发生这种情况以及如何解决它？我认为这可能与 Display: table 以及子菜单的绝对定位有关，但不确定。

http://jsfiddle.net/PBCwU/4/

相关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&amp;view=article&amp;id=7&amp;Itemid=263">
                <span>Choosing a Property</span></a></li>

                <li class="item264"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=264">
                <span>Downloads</span></a></li>

                <li class="item265"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=265">
                <span>FAQs</span></a></li>

                <li class="item266"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=266">
                <span>Moving In</span></a></li>

                <li class="item267"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=267">
                <span>Protecting Your Deposit</span></a></li>

                <li class="item268"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=3&amp;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;}

Answer 1

尝试: 删除:left: -999em; 并在类 .menutop li .fusion-submenu-wrapper 中添加 display:none; 移除:.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;} 更改:.menutop li.root:hover > .fusion-submenu-wrapper {left: 0;} 到 .menutop li.root:hover > .fusion-submenu-wrapper {display: block ； DEMO