dropdown li：hover ul {

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）中，当我们徘徊在子菜单时会发生这种情况;子菜单出现然后消失在主菜单项的mouseleave事件上。我们在Sencha论坛上找到了一个补丁，如果有人遇到同样的问题：

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

似乎纠正了它。

Answer 2

在子菜单中添加z index css属性

dropdown li：hover ul {

display：inline-block; z-index：9999999; 右：0像素; }

这将解决您的问题。

CSS下拉菜单在Google Chrome中无法正常运行（子菜单在悬停时消失）

2 个答案:

dropdown li：hover ul {