Question

我有一个下拉菜单，它无法使用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>

Answer 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。

Answer 2

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

CSS下拉菜单无法在IE和Chrome上运行

2 个答案: