Problem mit nur über css nachgebauten Selectboxen

[Enrico]

Mahlzeit,

ich bin gerade dabei, die Optik und Funktionsweise von Selectboxen mit eigenen Grafiken über css nachzubauen, damit die Selectboxen diese zur Optik unserer Homepage passen.

Mein Problem ist aktuell, dass die Auswahllisten "ListeTag", "ListeMonat" und "ListeJahr" initial nicht verborgen und zudem rechts von dem sich davor befindlichen div (und nicht darunter) angezeigt werden.

Die eben genannten Auswahllisten werden in der finalen Fassung dynamisch mit den jeweils verfügbaren Optionen belegt und sind hier zu Testzwecken bereits mit einem Wert vorbelegt.

Schematisch habe ich (wohl nicht nur im Firefox) folgende Ausgabe mit sofort angezeigten Listen (hier nur aus einem Wert bestehend):

[Tag][]1 [Monat][]Januar [Jahr][]2015

Der HTML-Code sieht wie folgt aus:

  
<div id="AuswahlTag">  
   <div class="SelectLinksUndMitte"><span>Tag</span></div>  
   <div id="ListeTag">1</div>  
</div>  
  
<div id="AuswahlMonat">  
   <div class="SelectLinksUndMitte"><span>Monat</span></div>  
   <div id="ListeMonat">Januar</div>  
</div>  
  
<div id="AuswahlJahr">  
   <div class="SelectLinksUndMitte"><span>Jahr</span></div>  
   <div id="ListeJahr">2015</div>  
</div>  

Hier der zugehörige css-Code:

  
.SelectLinksUndMitte  
{  
   background:  url(../IMG/SelectLinksUndMitte.png) no-repeat 0 0;  
   display:     block;  
   line-height: 21px;  
   padding:     0 0 0 8px;  
   color:       #000;  
}  
  
.SelectLinksUndMitte span  
{  
   background:    url(../IMG/SelectRechts.png) no-repeat top right;  
   display:       block;  
   float:         left;  
   padding-right: 22px;  
}  
  
#ListeTag,  
#ListeMonat,  
#ListeJahr,  
{  
   background: url(../IMG/SelectOptionenliste.png);  
   display:    none;  
   margin-top: 21px;  
}  
  
#AuswahlTag:hover #ListeTag  
{  
   display: block;  
}  

Was stimmt an meinen Defitionen nicht oder/und was habe ich übersehen?

Viele Dank für eure Mithilfe!

Gruß,
Enrico