Afficher un texte au survol

j'aimerais afficher un menu d'option de recherche assez complet sur mon site.
Pour ne pas qu'il prenne trop de place et gene la navigation, je souhaite le faire apparaitre que si le visiteur passe sa souris sur le texte "Options de recherche et d'affichage"

voila mon code
html:

<div id="optn_bar">
                   <span id="button">
                     <strong><span style="text-decoration: underline">Options de recherche et d'affichage</span></strong>
                     <span class="hidden"><em>Les options ici...<br />Les options ici...<br />Les options ici...<br />Les options ici...<br />Les options ici...<br /></em></span>
                   </span>
                 </div>

et css:

/* Barre réactive
******************************************/
#optn_bar {
        margin-bottom:10px;
        padding-left: 10px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-top: 5px;
        border: 1px dashed #f09;
}

#button span.hidden {
display: none;
}
#button:hover span.hidden {
display: block;
}

Le menu marche parfaitement sous Firefox, mais n'apparait pas sou IE...
Ou est l'erreur?
sinon, est ce que 2 span imbriqués est bon?
Merci d'avance pour vos réponses
Modifié par Swal (14 May 2005 - 11:27)

Bonjour,
C'est parce qu'ie ne reconnait "hover" que sur les balises a.

merci...
et donc quel serait la méthode à utilliser dans mon cas?
si je met dans un <a></a>, tout le texte "hidden" sera aussi sous forme de lien... et ce sera en fait un formulaire de recherche...

Je laisse tomber css et passe à du Javascript alors?
Modifié par Swal (14 May 2005 - 11:29)

Swal a écrit :

Je laisse tomber css et passe à du Javascript alors?

Pourquoi pas ?

C'est un comportement qui a sa place en JavaScript.

HTML => contenu
CSS => mise en forme
JS => comportement

:)