Auswahlliste in Bereich, der nur bei hover angezeigt wird

[clax]

In einem Bereich, der nur angezeigt werden soll, wenn mit der Maus über ein Bild gefahren wird (hover), wird (u.a.) eine gewöhnliche Auswahlliste (Formularelement) gezeigt.

Das Problem: Wird die Auswahlliste angeklickt, verschwindet der eingeblendete Bereich (inklusive der Liste) in dem Moment, in dem die Maus die Liste überfährt - unabhängig davon, ob die Maus faktisch noch innerhalb des Bereichs liegt, der bei hover eingeblendet wird, oder nicht.

  
<style type="text/css">  
a.tooltip span.invisible {  
  display: none;  
}  
a.tooltip:hover span.invisible {  
  display: block;  
}  
</style>  
  
<a class="tooltip">  
<img src="bild.png" alt="Immer sichtbares Bild">  
<span class="invisible">Der Text und die Auswahl, die erscheinen, wenn das Bild mit der Maus überfahren wird:<br>  
<form>  
 <select>  
  <option value="1" selected>Option 1</option>  
  <option value="2">Option 2</option>  
  <option value="3">Option 3</option>  
 </select>  
</form>  
</span>  
</a>  

Wie lässt es sich realisieren, dass die Auswahlliste zwar weiter nur dann erscheint, wenn sich die Maus über dem Bild befindet, sie aber nicht verschwindet, wenn der Nutzer mit der Maus einen Eintrag selektieren möchte?
Getesteter Browser: Firefox 3.5.9