html - CSS 下拉菜单在 Google Chrome 中无法正常工作(悬停时子菜单消失)

Question

我遇到了一个小型 CSS 下拉菜单(用于选择语言)的问题，该菜单在 Chrome 中无法正常工作(在 IE 和 Firefox 中工作正常)。将鼠标悬停时，语言选项会消失——但只是有时会出现。似乎真的没有任何逻辑。如果有任何帮助，我将不胜感激。

这个测试页面右上角可以看到菜单:http://www.hypro.se/test

编辑:我无法解决问题，但我决定改用 Polyglot Language Switcher:http://www.ixtendo.com/polyglot-language-switcher-2

我的CSS:

#dropdown {
 width: 110px;
 position: absolute;
 top: 0px;
 right: 0px;
 background: #222;
 font: 13px 'Open Sans Condensed', sans-serif;
 font-weight: 300;
 color: #fff;
 text-decoration: none;
 z-index: 9999999;
}
#dropdown li {
 width: 110px;
 height: 24px;
 float: left;
 background: #222;
 list-style: none;
 font: 13px 'Open Sans Condensed', sans-serif;
 font-weight: 300;
 color: #fff;
 text-decoration: none;
 border: 0;
}
#dropdown li:hover {
 background: #000;
}
#dropdown li a {
 font: 13px 'Open Sans Condensed', sans-serif;
 font-weight: 300;
 color: #fff;
 text-decoration: none;
}
#dropdown ul {
 background: #222;
 display: none;
 padding: 0;
 position: absolute;
 top: 24px;
 float: left;
 z-index: 9999;
}
#dropdown li:hover ul {
 display: block;
}
.globe {
    position: relative;
    left: 6px;
    top: 4px;
}
.choose_language {
    position: relative;
    left: 12px;
    top: 1px;
}
.flag {
 padding-left: 5px;
}
.language {
    position: relative;
    left: 5px;
    top: -7px;
}

我的 HTML:

      <nav id="dropdown">
        <li><span class="globe"><img src="bilder/hemsida/icon_globe.png" alt="Choose language" title="Choose language"/></span><span class="choose_language">Choose language</span>
          <ul>
            <a href="?p=index&lang=swe" lang="sv" hreflang="sv"><li><span class="flag"><img src="bilder/hemsida/icon_sweden.png" alt="Svenska" title="Svenska"/></span><span class="language">Svenska</span></li></a>
            <a href="?p=index&lang=fin" lang="fi" hreflang="fi"><li><span class="flag"><img src="bilder/hemsida/icon_finland.png" alt="Suomi" title="Suomi"/></span><span class="language">Suomi</span></li></a>
            <a href="?p=index&lang=eng" lang="en" hreflang="en"><li><span class="flag"><img src="bilder/hemsida/icon_england.png" alt="English" title="English"/></span><span class="language">English</span></li></a>
            <a href="?p=index&lang=ger" lang="de" hreflang="de"><li><span class="flag"><img src="bilder/hemsida/icon_germany.png" alt="Deutsch" title="Deutsch"/></span><span class="language">Deutsch</span></li></a>
            <a href="?p=index&lang=fra" lang="fr" hreflang="fr"><li><span class="flag"><img src="bilder/hemsida/icon_france.png" alt="Le Français" title="Le Français"/></span><span class="language">Le Français</span></li></a>
            <a href="?p=index&lang=esp" lang="es" hreflang="es"><li><span class="flag"><img src="bilder/hemsida/icon_spain.png" alt="Español" title="Español"/></span><span class="language">Español</span></li></a>
            <a href="?p=index&lang=ita" lang="it" hreflang="it"><li><span class="flag"><img src="bilder/hemsida/icon_italy.png" alt="Italiano" title="Italiano"/></span><span class="language">Italiano</span></li></a>
          </ul>
        </li>
      </nav>

Answer 1

这看起来是新 Chrome 版本 43 中的一个错误。当我们升级时它开始发生在我们身上，之前 v42 工作正常。在我们的框架(ExtJS v4.2)中，当我们将鼠标悬停在子菜单上时，它就会发生；子菜单出现，然后在主菜单项的 mouseleave 事件中消失。如果有人遇到同样的情况，我们在 Sencha 论坛上找到了一个补丁:

https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta

这似乎更正了它。