Menupunkte nebeneinander machen Faxen beim IE6

[Rohri]

Hallo,

ich habe ein "Two-Level-Menu" von hier: http://css.maxdesign.com.au/listamatic2/horizontal05.htm
an meine Bedürfnisse angepasst.

  
#navlist  
{  
position: relative;  
width: 100%;  
height: 30px;  
margin: 0;  
padding: 0;  
white-space: nowrap;  
}  
  
#navlist li  
{  
float: left;  
margin: 3px;  
padding: 4px;  
width: 109px;  
list-style-type: none;  
display: block;  
}  
  
#navlist li#active  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
color: #FFF;  
}  
  
#navlist li#active a  
{  
font-weight: bold;  
color: #FFF;  
}  
  
#navlist li#active a:hover { color: #fff; }  
  
  
#navlist li#tab2  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab2.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
color: #525252;  
}  
  
#navlist li#tab2 a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
#navlist li#tab2 a:hover  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: underline;  
}  
  
#navlist li#tab2#active a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
  
  
#navlist li#tab3  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab2.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
color: #525252;  
}  
  
#navlist li#tab3 a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
#navlist li#tab3 a:hover  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: underline;  
}  
  
#navlist li#tab3#active a  
{  
display: block;  
color: #525252;  
text-align: center;  
text-decoration: none;  
}  
  
  
  
  
  
#navlist li a  
{  
position: relative;  
display: block;  
color: #FFF;  
text-align: center;  
text-decoration: none;  
}  
  
#navlist li a:hover  
{  
color: #00c;  
text-decoration: underline;  
}  
  
  
#navlist ul#subnavlist  
{  
position: absolute;  
width: 100%;  
left: 0;  
top: 24px;  
height: 23px;  
margin: 0;  
padding: 0;  
white-space: nowrap;  
background-color: #06C;  
}  
  
#navlist ul#subnavlist li  
{  
width: auto;  
margin: 0;  
padding-right: 10px;  
border: 0;  
}  
  
#navlist ul#subnavlist li a  
{  
width: auto;  
padding: 2px;  
border: 0;  
color: #FFF;  
}  
  
#navlist ul#subnavlist li a:hover  
{  
color: #00c;  
text-decoration: underline;  
/* IE5/Mac disappearing item fix */  
}  
  
#navlist ul#subnavlist li#subactive a  
{  
float: left;  
margin: 3px;  
padding-left: 0px;  
width: 109px;  
background: transparent url(tab.gif) left top no-repeat;  
list-style-type: none;  
display: block;  
}  
  
  
  
* html > body #navlist, * html > body #navlist ul#subnavlist  
{  
width: 600px;  
/* IE5/Mac fixed width fix */  
}  

  
<div id="navcontainer">  
<ul id="navlist">  
<li id="active"><a href="#" id="current">ITEM1</a>  
<ul id="subnavlist">  
<li><a href="#">sub1</a></li>  
<li><a href="#">sub2</a></li>  
<li><a href="#">sub3</a></li>  
<li><a href="#">sub4</a></li>  
<li><a href="#">sub5</a></li>  
</ul>  
</li>  
<li id="tab2"><a href="#">ITEM2</a></li>  
<li id="tab3"><a href="#">ITEM3</a></li>  
</ul>  
</div>  

Der Validator gibt keine Fehlermeldung aus und im IE 7 sowie den aktuellen Firefox und Opera erfolgt die Darstellung wie gewünscht. Im IE6 erscheinen allerdings die "Submenupunkte" nicht nebeneinander, sondern untereinander.

Ich habe versucht das Problem zu beheben und verschiedene "Tipps" ausprobiert, z.B. den, dass man li a mit float:left beglücken soll. Das hat aber nicht funktionert. Vielleicht gibt es ja soetwas wie den "3-Pixel-Bug" und einer von Euch kennt die Lösung auf den ersten Blick. Ansonsten wäre ich natürlich auch für jede andere Hilfe sehr dankbar!

Gruß, Rohro