Hallo,
Ich habe ein Menü welches in allen Browsern so aussehen soll:

Dazu habe ich folgenden Code geschrieben:
<ul id="menu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a>
<ul>
<li><a href="#>Baz</a></li>
<li><a href="#>Bum</a></li>
</ul>
</li>
<li><a href="#">Bab</a></li>
<li><a href="#">Huz</a></li>
</ul>
#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-transform: uppercase;
font-size: 110%;
}
#menu li {
margin: 1px 0;
padding: 0;
}
#menu li a, #menu li strong {
background: #fae4ab;
display: block;
padding: 0.4em 1em;
margin: 0;
text-decoration: none;
color: #4b2c10;
}
#menu li a:hover { background: #faecc8; }
#menu ul { margin: 0; padding: 0; list-style-type: none; }
#menu ul a, #menu ul strong { padding-left: 3em; font-size: 85%; }
Es sieht auch in (fast) allen Browsern genau so aus wie erwartet. Nur im IE nicht, da sieht das dann so aus:

Woran zum Teufel liegt das? Welcher Bug tritt hier auf? Wie kann ich das am einfachsten beheben?
Grüße
Jeena Paradies