I'm having trouble getting my CSS menu to work in Internext Explorer, the code works perfectly fine in both Firefox/Google Chome. I believe it has something to do with the :hover pseudo class. The outline of the menu will appear on internet explorer however once you move down to hover over a drop down element it simply vanishes.

Website: http://www.newsmuncher.com

CSS Code:

/*-- Menu --*/

.menu {
    margin: 0;
    width: 100%;
    display: block;
    z-index: 5;
}

.menu li
{    
    float: left;
    position:relative;
    border-right: 1px solid #1a397a;
    border-left: 1px solid #355089;
}

.menu li:first-child {
    border-left: 1px solid #1a397a;
}

.menu a {
    padding: 10px;
    text-decoration: none;    
    display: block;
    color: #FFFFFF;
}

.menu a:hover {
    background: #284581;
    color: #FFFFFF;
}

.menu ul {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #284581;
    border: 1px solid #1A397A;
    border-top: none;
    border-radius: 0 0 3px 3px;
    top: 35px;
    left: -9999px;
    position: absolute;
    min-width: 125px;
}

.menu ul li {
    float: none;
    border: none;
    border-bottom: 1px solid #1a397a;
    border-top: 1px solid #355089;
    background: #284581;
}

.menu ul a {
    white-space: nowrap;
    padding: 7px 10px !important;
}

.menu li a:hover ul, .menu li:hover ul {
    left: -1px;    
}

.menu li a:hover, .menu li:hover a {
    background: #284581;    
}

.menu li:hover ul li a:hover {
    background: #304B86;    
}

.menu ul li:first-child {
    border-left: none;
}

.menu ul li:last-child {
    border-bottom: none;    
}

<div id="header" class="clearfix">
    <div class="module clearfix">
        <div id="logo" class="clearfix"> <a href="/"> <span>Newsmuncher.com</span></a></div>
        <ul class="menu">
            <li><a href="#">Home<![if !IE]></a><![endif]>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="/help/">Help</a></li>
                    <li><a href="/terms/">Terms</a></li>
                    <li><a href="/privacy/">Privacy</a></li>
                </ul>
                <![if IE]></a><![endif]> 
            </li>
            <li><a href="#">News</a></li>
        </ul>
    </div>
</div>

What version of IE

And set the margins of the problem elements to 0.

It's IE9, although it doesn't work in any of the internext explorers.

I've given the elements a margin of 0 and it still doesn't seem to make a difference. The background of the dropdown ul is still transparent.

Setting margins is not going to affect the background colour.

The other thing I've just seen is the z-index on .menu and IE has problems with stacking orders. It isn't actually doing anything because you can only change the stacking order on positioned elements.

I have just resolved the issue, the menu was showing but it was hiding behind all the over divs below it etc... Just needed to amend a few of the positions and z-indexs. Thanks for the help.