:hover sur balise <dt> sans utiliser de balise <a> ?

(re)Bonjour à tous !

Alors voilà je m'en sors difficilemment avec mon menu (notamment à cause d'Internet Explorer), mais voilà où j'en suis :
http://www.alliancepec-isere.org

En gros, le seul souçi qui me reste réside dans l'effet :hover sur mes balises <dt>.
En effet, pour les rubriques de premier niveau, il y a deux possibilités :
- soit elles ne possèdent pas de sous-rubriques, au quel cas elles sont cliquables (en ce sens qu'un clic sur leur intitulé redirige vers la page en question), et dans ce cas là la balise <dt> possède une balise <a>, logique, et leur couleur de fond au survol de la souris est orange...
- soit elles possèdent des sous-rubriques, et ne sont donc pas cliquables (le clic sur leur intilé ne produit aucun effet), ne possèdent donc pas de balise <a> dans la balise <dt> (j'y tiens ! la solution <a href="#"...> ne me convient pas) et leur couleur de fond au survol est vert foncé.
Celà marche évidemment avec les navigateurs respectant les standards, mais pas sous IE.

Existe t-il une solution, un hack, une technique pour celà ?

Merci d'avance pour vos réponses

PS : un exemple de code HTML de mon menu, avec une rubrique de chaque type :

<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Les <acronym title="Association pour le Maintien de l'Agriculture Paysanne" lang="fr" xml:lang="fr">AMAP</acronym></dt>

        <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
            <ul>
                <li><a href="#">Comment &ccedil;a marche ?</a></li>
                <li><a href="#">Le respect d'une charte</a></li>
                <li><a href="#">Comment rejoindre une <acronym title="Association pour le Maintien de l'Agriculture Paysanne" lang="fr" xml:lang="fr">AMAP</acronym> ?</a></li>

                <li><a href="#">Comment cr&eacute;er une <acronym title="Association pour le Maintien de l'Agriculture Paysanne" lang="fr" xml:lang="fr">AMAP</acronym> ?</a></li>
                <li><a href="#">Les produits propos&eacute;s</a></li>
                <li><a href="#">La qualit&eacute; &amp; le prix</a></li>

                <li><a href="#">Un engagement fort des producteurs</a></li>
                <li><a href="#">T&eacute;moignages de professionnels</a></li>
            </ul>
        </dd>
        
    <dt><a href="#">Nous avons lu pour vous</a></dt>

Et la partie du CSS qui va avec :

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 26px;
left: 265px;
width: 160px;
font-family: Georgia, serif;
font-size: 12px;
}

#menu dt {
cursor: pointer;
line-height: 16px;
text-align: right;
background-color: #afb70d;
background-image: url(img/puce_off.gif);
background-position: right;
background-repeat: no-repeat;
display:block;
width:100%;
color:#3a350f;
text-decoration: none;
padding-right: 20px;
}
#menu dt:hover {
background-color: #4c5c0f;
background-image: url(img/puce_on.gif);
background-position: right;
background-repeat: no-repeat;
color: #fff;
}
#menu dt a {
display:block;
width: 100%;
color:#3a350f;
text-decoration: none;
}
#menu dt a:hover {
color: #fff;
display:block;
width: 100%;
background-color: #c60;
background-image: url(img/puce_on.gif);
background-position: right;
background-repeat: no-repeat;
padding-right: 20px;
}
#menu dd {
display: none;
position:absolute;
z-index: 100;
left: 180px;
line-height: 16px;
width: 280px;
background-color: #afb70d;
margin-top: -16px;
}
#menu li {
text-align: left;
}
#menu li a  {
color: #fff;
text-decoration: none;
padding-left: 10px;
line-height: 16px;
display: block;
background-color: #4c5c0f;
width: 100%;
}
#menu li a:hover {
color: #fff;
background-color: #c60;
}

Modifié par Zanidou (15 Jun 2007 - 09:31)

Salut,
Malheureusement il me semble que IE ne gere pas les pseudo-classes pour d'autres balises que <a>. Et dieu sait que c'est bien dommage...

Je dirais même que les :hover ne sont applicables qu'aux balises A et à aucune autre.
Modifié par tioneb369 (01 Jun 2007 - 16:01)

Hello

Une solution en javascript te conviendrait ?

<dt onmouseover="javascript:montre('smenu4');[b]javascript:this.style.background='#...'[/b]" [...]></dt>

Merci à tous pour vos réponses !
BeliG, oui ta solution était alléchante, je viens de la tester ça marche... Sauf que du coup mes puces qui étaient en background-image n'apparaissent plus !
Je sais pas si je m'en sortirais un jour...
D'autant que sur les autres rubriques (qui n'ont pas de sous-rubriques, fond orange donc), les puces du menu du fond apparaissent avec un décalage sur la droite (je ne suis peut-être pas clair, mais un simple test sous IE vous montrera de quoi je parle...)
Si quelqu'un trouve le pourquoi du comment, et surtout comment y remédier, je suis preneur !
Et encore merci !