CSS dropdown menu not working on IE and Chrome

Question

I have a dropdown menu and it's not working with Internet Explorer 10 (and compatibility mode) and Chrome. It does however work with Firefox (latest).

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

In the rules for #menu li:hover ul, use display: block; instead of display: flex;. (See demo at http://jsfiddle.net/8LaLa/1/.)

display: flex isn't supported by all browsers - see https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility.

Answer 2

Your menu may not be clearing properly. You have a lot of floated elements and that can cause errors with your rendering. When you float an element you are taking that element "out of flow". Basically the element will disregard its position in the DOM and try to slide to the side you set in your float. If all child elements inside of a wrapper are floated the parent no longer knows how tall it should be (since all the elements are out of flow) and it sets itself to 0px height or to the height of the tallest in-flow element. To fix this you need a clearfix. This will tell the browser to make the container clear its children. Hopefully this fixes your issue!