Horizontal menu is displayed vertically in Internet Explorer

Question

Ok so I know there are a few similar questions on here but I can't seem to fix my problem with the solutions I read. I'm making a new website and the menu is displayed horizontally in Chrome and Firefox but it is displayed vertically in older versions of Internet Explorer or in Internet Explorer's compatibility mode. Here are the screenshots to compare:

Chrome: http://imgur.com/ZQVKGya

Internet Explorer (compatibility mode): http://imgur.com/Q3z6VzW

Not only the menu looks broken, but a few things look misplaced. Fixing the menu would be a good place to start.

Here is the HTML code:

<div id="menu">
    <nav>
        <ul>
            <li>Home</li>
            <li>Tires
                <ul>
                    <li>Utility
                        <ul>
                            <li>Gripper</li>
                            <li>Radical</li>
                        </ul>
                    </li>
                    <li>Sport
                        <ul>
                            <li>Race-X</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Contact
                <ul>
                    <li>About us</li>
                    <li>Contact us</li>
                </ul>
            </li>
            <li>Dealers
                <ul>
                    <li>Locate a dealer</li>
                    <li>Become a dealer</li>
                </ul>
            </li>
            <li>Downloads</li>
        </ul>
    </nav>
</div>

Here's the CSS code:

#menu {
    height: 40px;
    width: 960px;
    text-align: center;
    line-height: 40px;
    color: #FFF;
    float: left;
    -webkit-box-shadow: 0 5px 10px -2px #888;
    -moz-box-shadow: 0 5px 10px -2px #888;
    box-shadow: 0 5px 10px -2px #888;
    border-bottom: 1px solid #000;
    background: #333;
    font-family: 'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    background: #333;
    background: linear-gradient(top, #000 0%, #4B4B4B 100%);  
    background: -moz-linear-gradient(top, #000 0%, #4B4B4B 100%); 
    background: -webkit-linear-gradient(top, #000 0%, #4B4B4B 100%); 
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

nav ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

nav ul li {
    width: 20%;
    background: #333;
    -webkit-box-shadow: inset 0 0 1px #000;
    -moz-box-shadow: inset 0 0 1px #000;
    box-shadow: inset 0 0 1px #000;
    float: left;
}

nav ul li:hover {
    -webkit-box-shadow: inset 0 0 30px #000;
    -moz-box-shadow: inset 0 0 30px #000;
    box-shadow: inset 0 0 30px #000;
}

nav ul li.active {
    -webkit-box-shadow: inset 0 0 30px #000;
    -moz-box-shadow: inset 0 0 30px #000;
    box-shadow: inset 0 0 30px #000;
}

nav ul li a {
    display: block; 
    color: #FFF;
    text-decoration: none;
}

nav ul ul {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    width: 20%;
    background: #333;
    padding: 0;
    position: absolute;
    display: none;
    top: 100%;
}

nav ul ul li {
    width: 100%;
    float: none; 
    border-bottom: 1px solid #494949;
    position: relative;
}

nav ul ul li:hover {
    -webkit-box-shadow: inset 0 0 0 #868686;
    -moz-box-shadow: inset 0 0 0 #868686;
    box-shadow: inset 0 0 0 #868686;
    background: #868686;
    color: #FFF;
}

nav ul ul li a {
    line-height: 35px;
    height: 35px;
}   

nav ul ul li a:hover {
    background: #868686;
}

nav ul ul ul {
    width: 100%;
    position: absolute; 
    left: 100%; 
    top:0;
}

Any help would be greatly appreciated!

Answer 1

It looks like IE is not recognising the nav element. IE in Compatibility mode interprets the markup as follows:

<div id="menu">
    <nav />
        <ul>
            <li>Home</li>
            ...
        </ul>
</div>

Notice how the nav element self-closes. This means that none of your CSS rules match the markup. (You can see this for yourself by using the developer tools bundled with later versions of IE - press F12)

I suggest changing your CSS rules by replacing references to nav with #menu , and this should work across a range of IE versions.

Answer 2

To add on to the correct answer above...

If you plan on using HTML5 then include shim...

<!-- HTML5 shim -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->