0

我有一个下拉菜单，但它不适用于 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>
4

2 回答 2

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。

于 2013-07-09T19:28:52.453 回答
0

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

于 2013-07-09T19:05:13.723 回答