CSS 下拉菜单在 IE 和 Chrome 上不起作用答案

【问题标题】：CSS dropdown menu not working on IE and ChromeCSS 下拉菜单在 IE 和 Chrome 上不起作用
【发布时间】：2013-07-09 18:48:10
【问题描述】：

我有一个下拉菜单，但它不适用于 Internet Explorer 10（和兼容模式）和 Chrome。但它确实适用于 Firefox（最新）。

CSS：

#menu_items
{ float: left;
  width: 600px;
}
  #menu
{ margin:0;
  float: left;
}
#menu li
{ 
    padding: 0 0 0 0px;
    list-style: none;
    margin: 2px 0 0 0;
    display: inline;
    background: transparent;
}
#menu li a{
    float: left;
    font: bold 120% Arial, Helvetica, sans-serif;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    height: 24px;
    text-shadow: 0px 1px 0px #000;
    padding: 16px 0px 10px 40px;
    background: transparent; 
}
#menu li ul li a {
    float: left;
    font: bold 90% Arial, Helvetica, sans-serif;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    height: 24px;
    text-shadow: 0px 1px 0px #000;
    padding: 16px 0px 10px 40px;
    background: transparent; 
}
#menu li:hover ul {
    display: flex;
    float:inherit;
    text-shadow: 0px 1px 0px #000;
    padding: 1px 40px 0px 0px;
    background: #669CD8;
    background: -moz-linear-gradient(#90B9E2, #4B75AF);
    background: -o-linear-gradient(#90B9E2, #4B75AF);
    background: -webkit-linear-gradient(#90B9E2, #4B75AF);
    margin: 50px 0px 0px 0px;
    border-style:solid;
    border-width:1px;
    z-index: 2;
}
#menu li ul {
    display: none;
    position: absolute;
}
#menu li.current a, ul#menu li:hover a
{ 
    color: #FFF;
    text-decoration: underline;
}

HTML：

    <div id="menu_items">
      <ul id="menu">
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="werkwijze.html">Werkwijze</a></li>
        <li><a href="#">Producten</a>
            <ul>
                <li><a href="klimaat.html" id="klimaat">Klimaat</a></li>
                <li><a href="voerbakken.html" id="voerbakken">Voerbakken</a></li>
                <li><a href="voerinstallatie.html" id="voerinstallatie">Voerinstallatie</a></li>
                <li><a href="kraamhokken.html" id="kraamhokken">Kraamhokken</a></li>
                <li><a href="boxen.html" id="boxen">Boxen</a></li>
                <li><a href="bighok.html" id="bighok">Biggen hokken</a></li>
                <li><a href="roosters.html" id="roosters">Roosters</a></li>
                <li><a href="silos.html" id="silos">Silo's</a></li>
            </ul>
        </li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

【问题讨论】：

chrome 和 Internet Explorer 等浏览器不支持您的某些 CSS 语法。如 -moz-linear-gradient 等
因此还有-o-linear-gradient和-webkit-linear-gradient
您能否更具体地说明什么不起作用？我没有看到任何在 FF 中使用 jsfiddle.net/8LaLa 的东西。
@KatieK 将鼠标悬停在“producten”上，它适用于我的 FF...i.imgur.com/DC1VM7A.png
@selten98 - FWIW，在 Firefox 21 中将鼠标悬停在“Producten”上时不会出现任何内容，但 FF22 中确实出现了新选项。

标签： html css webkit gecko

【解决方案1】：

在#menu li:hover ul 的规则中，使用display: block; 而不是display: flex;。（参见http://jsfiddle.net/8LaLa/1/ 的演示。）

并非所有浏览器都支持display: flex - 请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility。

【讨论】：

【解决方案2】：

您的菜单可能无法正确清除。您有很多浮动元素，这可能会导致渲染错误。当您浮动一个元素时，您正在使该元素“失去流动”。基本上，该元素将忽略其在 DOM 中的位置，并尝试滑动到您在浮动中设置的一侧。如果包装器内的所有子元素都是浮动的，则父元素不再知道它应该有多高（因为所有元素都没有流动），并且它将自己设置为 0px 高度或最高的流入元素的高度。要解决此问题，您需要clearfix。这将告诉浏览器使容器清除其子项。希望这可以解决您的问题！

【讨论】：