CSS Menu in IE7/8

Im having issues with a drop down menu system in IE7 and 8.

It works flawlessly in Chrome and FF, however in IE7 and 8 for some reason it doesn't apply some of the sty开发者_运维问答ling and ends up being misplaced in the browser.

You can view it here:

http://www.gardensandhomesdirect.co.uk/menutest

As said, it works fine in Chrome, however I am struggling to get it to work properly, or even just BETTER in IE7.

Any help is appreciated!!

You need to set an explicit width on .side_nav ul li:

.side_nav ul li {
    float: left;
    position: relative;
    width: 173px;
    display: block;
    text-align: left;
    clear: both;
}

For extra protection, you might want to add a clear: both and a text-align: left property (shown in the above example).

Try adding

display: block;

to your

.side_nav ul li