[sourcecode language="css"]

#menu ul.level2 li {
display: block;
}

#menu ul.level2 li a {
display: block;
float: none;
border: 1px solid transparent; /* Stops the box from jittering on hover */
margin: 0.25em 0px;
padding: 0.3em 0.6em;
background: transparent;
color: #666666;
font-weight: normal;
}

#menu ul.level2 li a:hover {
background: #f36e45 url(../images/menu-level2-bg-hover.gif) left top repeat-x;
color: #ffffff;
border: 1px solid #f2683d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

[/sourcecode]

2 major problems. There is a large margin on the bottom of my list items, and there is a funny dark grey border around each list item. So why these 2 bugs?

Grey Border

The grey border is caused by IE6′s failiure to render transparent borders. It instead falls back to the color property (which in this case is set to #666666).

This is the first place on my site where I need to render something differently in IE6 to other browsers. There are 2 ways of doing this:

1. Use the famous ‘* html’ hack. IE has a mysterious wrapper around the html tag (god only knows why!).
2. Include another stylesheet for IE6

For a site of this size, the sensible option was to include a separate stylesheet for IE and below. The stylesheet should only render in IE5 and 6 because of the @import hack (hides the stylesheet from all v4 browsers):

[sourcecode language='html']

[/sourcecode]

To fix the border, we set the border color to a color we’ll never use within the element or on any of it’s children – pink is usually a good bet. We then apply the Microsoft CSS filter property to that color to make it transparent.

[sourcecode language='css']

#menu ul.level2 li a {
border-color: pink;
filter: chroma(color = pink);
}

[/sourcecode]