Problemer med hover og select

Jeg oplever desværre lidt problemer med noget hover jeg skal bruge på en select. Jeg troede rigtig at jeg var heldig og at det virkede, men det gør det desværre ikke ordentligt. Det vil sige at det virker fint i IE, men i FF fejler det. Hover-funktionen virker fint, men jeg kan ikke få lov til at vælge en option. Det kan jeg i IE uden problemer. Det er som om at a tag'et ligger "oven på select tag'et" og derfor ikke er muligt at klikke på. Og det gør den jo sådan set også sådan som jeg har kodet det. Men er det det som er problemet? Og hvad kan jeg gøre for at løse det? Det SKAL virke i både IE og FF som minimum.

<p class="text">Vinduestype:</p>
<a href='#'><span><img src="grafik/vinduer.jpg" alt="Vindues-Typer" border="0"></span>

<select size="1" name="vinduesType">
                           
  <option>Type 1</option>
  <option>Type 2</option>
  <option>Type 3</option>

</select><br></a>

I stylesheet;

div#character a span {
  display: none;
}
   
div#character a:hover span {
  display: block;
  position: absolute;
  top: 0px;
  left: -343px;
  z-index: 100;
  text-align: center;
}

Har prøvet at ændre display: block; til lidt forskellige ting uden held, og jeg har prøvet med z-index på select og option tag, også uden held.

Det skal siges at det virker i FF, hvis man klikker på select og holder muse-knappen nede og flytter den ned på den option man ønsker at vælge. Hvis man som mennesker normalt gør, klikker 1 gang på select (og giver slip på musen) og så klikker på den option man ønsker, funker det som sagt ikke. Så bliver markeringen bare på den første.

Nogen som har en kløgtig idé? Jeg vil naturligvis helst holde mig til CSS og ikke over i JavaScript.

På forhånd tak :)