Jeena Paradies: IE macht Lücken in Liste

Beitrag lesen

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