Problem mit nachgebautem <select>-Tag

[Enrico]

Hallo,

da ich bei meiner Seite komplett auf JavaScript verzichten werde und gleichzeitig aber in allen Browsern einheitlich angezeigte Auswahllisten ("<select>") haben will, habe ich dies über eigene Grafiken realisiert. Die JavaScript-seitige Abfrage des "onchange"-Ereignisses bei Änderung der Auswahl bzw. Treffen einer Auswahl habe ich durch konventionelle Links ersetzt (hier der Übersichtlichkeit halber noch ohne Ziele):

  
   <ul>  
  
      <li>  
      <a class="DropDown" href="#"><span class="DropDownLinks"></span>Größe?<span class="DropDownRechts"></span></a>  
      <ul>  
         <li><a href="#">S</a></li>  
         <li><a href="#">M</a></li>  
         <li><a href="#">L</a></li>  
         <li><a href="#">XL</a></li>  
      </ul>  
      </li>  
  
      <li>  
      <a class="DropDown" href="#"><span class="DropDownLinks"></span>Farbe?<span class="DropDownRechts"></span></a>  
      <ul>  
         <li><a href="#">Rot</a></li>  
         <li><a href="#">Blau</a></li>  
         <li><a href="#">Grün</a></li>  
         <li><a href="#">Weiß</a></li>  
      </ul>  
      </li>  
  
   </ul>  

Leider missfällt mir aber noch die Ausgabe im Browser.

Ich habe für die Grafik beide Listen dupliziert, damit meine nachfolgende Frage verständlicher wird:

Woran liegt es, dass ich bei der aufgeklappten Liste einen großen linksseitigen Abstand habe und sich die Liste zudem über die Breite des "Select"-Elements hinaus ausdehnt?

Hier die css-Definitionen:

  
   ul  
   {  
      float:           left;  
      list-style-type: none;  
      z-index:         5;  
   }  
  
   ul li  
   {  
      float:        left;  
      margin-right: 12px;  
   }  
  
   ul a span.DropDownLinks  
   {  
      background: url(../GRAFIKEN/DropDownLinks.png);  
      float:      left;  
      height:     22px;  
      width:      7px;  
   }  
  
   ul a.DropDown  
   {  
      background:      url(../GRAFIKEN/DropDownMitte.png) repeat-x;  
      display:         block;  
      height:          22px;  
      line-height:     22px;  
      text-decoration: none;  
   }  
  
   ul a.DropDown:hover  
   {  
  
   }  
  
   a span.DropDownRechts  
   {  
      background: url(../GRAFIKEN/DropDownRechts.png);  
      float:      right;  
      height:     22px;  
      width:      22px;  
   }  
  
   ul ul  
   {  
      background:      #fff;                /* Hack für IE7+                            */  
      background:      rgba(255,255,255,0); /* Vorherige Definition "unsichtbar" machen */  
      display:         none;  
      list-style-type: none;  
   }  
  
   ul li ul  
   {  
      background: url(../GRAFIKEN/DropDownHintergrundListe.png) repeat;  
   }  
  
   ul ul li  
   {  
      float: none;  
   }  
  
   ul ul a  
   {  
      text-decoration: none;  
      white-space:     nowrap;  
   }  
  
   ul li:hover ul  
   {  
      display: block;  
   }  

Vielen Dank für eure Mithilfe.

Gruß,
Enrico