How do I get this to render in IE6?

Question

Cannot work out how to get the following menu to display correctly in IE6, any ideas?

Demo: http://www.jankoatwarpspeed.com/examples/vimeo_navigation/

Answer 1

A few key things to remember that are relevant to this menu:

• Forget transparent PNGs in IE6 (possible to get them working but not a great experience)
• Forget display:inline-block in IE6
• Forget z-index in IE6
• Forget :first-child and :last-child in IE6

Basically, what you have to do is:

• Use transparent GIFs or non-transaparent PNGs
• Instead of display:inline-block, use float:left and friends
• You don't really need z-index for this menu anyway
• You will have to decorate first and last children with classes manually

EDIT: IE6 doesn't support CSS selectors like "#menu > li", you will have to use "#menu li".