Neuer Ansatz -> Hilfe bei Feinschliff benötigt

[Enrico]

Hallo Cheatah,

so, jetzt habe ich (hoffentlich) einen wesentlich besseren Ansatz für mein Drop-Down-Menü,
allerdings ist es noch nicht ganz perfekt.

Mein Problem ist noch, dass sich die Hintergrundfarbe der Unterpunkte beo MouseOut und auch
bei MouseOver nur über die Länge des jeweiligen Links erstrecken, aber nicht über die Länge
des längsten Links des jeweiligen Untermenüs.

Schwierig zu beschreiben, deshalb nachfolgend eine Skizze, auch weil ich keinen Online-Link
anbieten kann, der mein Problem veranschaulichen könnte:

Ausgangszustand:

+----------------+-----+---+
   |Anfangsbuchstabe|Genre|FSK|
   +----------------+-----+---+

Aktueller Stand bei Mouseover:

+----------------+-----+---+
   |Anfangsbuchstabe|Genre|FSK|
   +----------------+-----+---+
                    |Action|
                    |Drama|
                    |Horror/Thriller|

Beabsichtigte Ausgabe bei Mouseover:

+----------------+-----+---+
   |Anfangsbuchstabe|Genre|FSK|
   +----------------+-----+---+-----+
                    |Action         |
                    |Drama          |
                    |Horror/Thriller|
                    +---------------+

Hier der zugehörige HTML-Code:

<ul id="menubar">
      <li><a class="Auswahlliste" href="#">Anfangsbuchstabe</a>
         <ul>
            <li><a href="#">C</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">H</a></li>
         </ul>
      </li>
      <li><a class="Auswahlliste" href="#">Genre</a>
         <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Action/Drama</a></li>
            <li><a href="#">Horror</a></li>
         </ul>
      </li>
      <li><a class="Auswahlliste" href="#">FSK</a>
         <ul>
            <li><a href="#">0</a></li>
            <li><a href="#">16</a></li>
            <li><a href="#">18</a></li>
         </ul>
      </li>
   </ul>

Hier der zugehörige CSS-Code:

#menubar,
   #menubar ul
   {
      list-style: none;
      margin: 0;
      padding: 0;
   }

#menubar a
   {
      background:#5d7ac5;
      color:#b2b2b2;
      display: block;
      padding: 3px;
      text-decoration: none;
   }

#menubar a.Auswahlliste
   {
      padding: 3px;
      white-space: nowrap;
   }

#menubar li
   {
      float: left;
      width:auto;
   }

#menubar li
   {
      position: relative;
   }

#menubar li ul,
   #menubar ul li
   {
      clear:both;
   }

#menubar ul li a
   {
      color: #565656;
      border-right: 0;
      padding: 3px;
   }

#menubar li ul
   {
      display: none;
      position: absolute;
   }

#menubar li:hover a,
   #menubar a:focus,
   #menubar a:active
   {
      background:#b0c6ff;
      color:#000000;
   }

#menubar li:hover ul
   {
      display: block;
   }

#menubar li:hover ul a
   {
      background:#5d7ac5;
      color:#b2b2b2;
   }

#menubar ul a:hover
   {
      background:#b0c6ff !important;
      color:#000000 !important;
   }

"Erschwerend" kommt hinzu, dass ich den <li>-Elementen keine feste Breite zuweisen kann, weil
sie in ihrer Breite variieren.

Ich hoffe, Du (ihr) könnt mir jetzt besser weiterhelfen als bei meinem verkorksten letzten Ansatz.

Vielen Dank.

Gruß
Enrico