CSS下拉菜单在谷歌浏览器中无法正常工作(子菜单在悬停时消失)

Question

我遇到了一个小的CSS下拉菜单（用于选择语言）的问题，它在Chrome中无法正常工作（在IE和Firefox中运行良好）。语言选择在悬停时会消失——但只是有时。似乎真的没有任何逻辑。如果有任何帮助，我将不胜感激。

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

编辑：我无法解决这个问题，但我决定使用Polyglot语言切换器：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）中，当我们悬停到子菜单时，就会发生这种情况；子菜单出现然后消失在主菜单项的CCD_ 1事件上。如果有人遇到同样的情况，我们在Sencha论坛上找到了一个补丁：

https://www.sencha.com/forum/showthread.php?301116-子菜单-彩色-43-双色

这似乎纠正了它。

Answer 2

在子菜单中添加z索引css属性

下拉列表li：悬停ul{

显示：内联块；z索引：9999999；右侧：0px；}

这将解决您的问题。