Pb de display:none sous IE

Bonjour,
j'ai un menu entièrement CSS, avec un sous-menu pour l'un des items. Le sous-menu s'affiche au roll over. Tout se comporte bien sous FF, en revanche sous IE, la propriete display:none ne semble pas marcher, le sous-menu étant affiché en permanence.
Pour plus de clarté, voici le code :

#menu a.item3:link, a.item3:visited {
color:#fff;
text-shadow:0 1px 0 grey;
font-weight:bold;
width:152px;
height:25px;
display:block;
float:left;
line-height:25px;
text-align:center;
vertical-align:middle;
text-decoration:none;
-moz-box-shadow:1px -1px 1px #777777;
-webkit-box-shadow:1px -1px 1px #777777;background:url(../images/bgmenu-item3.png);
margin-right:4px;
}

#menu a.item3:link span, a.item3:visited span {
display:none;
}

#menu a.item3:hover {
color:#fff;
text-shadow:0 1px 0 grey;
font-weight:bold;
width:152px;
height:39px;
display:block;
float:left;
line-height:39px;
text-align:center;
vertical-align:bottom;
text-decoration:none;
-moz-box-shadow:1px -1px 1px #777777;
-webkit-box-shadow:1px -1px 1px #777777;
background:url(../images/bgmenu-item3-roll.png);
margin-right:4px;
cursor:default;
}

#menu a.item3:hover span {
display:inline;
position:absolute;
top:25px;
right:4px;
}

#menu ul {
list-style-type:none;
list-style-position:outside;
}

#menu ul li {
color:#fff;
text-align:left;
font-size:14px;
line-height:16px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}

a.filiales:link, a.filiales:visited {
text-decoration:none;
background-color:#f49482;
display:block;
padding:5px;
color:#fff;
}

a.filiales:hover {
text-decoration:none;
color:#f26349;
background-color:#fff;
display:block;
padding:5px;
}

Et voici le code HTML :

<div id="menu"><a href="standis.html" class="item1" title="Standis">Standis</a><a href="nos-services.html" class="item2" title="Nos services">Nos services</a><div class="positionitem3"><a class="item3" href="#">Nos filiales <span><ul><li><a href="standis-optic.html" class="filiales" title="Standis Optic">Standis Optic</a></li><li><a href="standis-tce.html" class="filiales" title="Standis TCE">Standis TCE</a></li></ul></span></a></div>
<div class="positionitem4"><a href="nos-realisations.html" class="item4" title="Nos réalisations">Nos réalisations</a></div>
</div>

Merci de vos lumières !

Bonjour,

Ne t'es-tu pas trompé dans le copier-coller ?
Je vois une balise <ul> inclue dans des éléments de type inline comme un <span> ainsi qu'un <a>, ce qui n'est rigoureusement pas valide.

Je pense qu'il est plus sage de commencer par corriger les erreurs HTML avant de chercher à corriger la feuille de style. De plus, pour faciliter la correction / debuggage, je t'invite à retirer les propriétés CSS superflue pour ne garder que l'essentiel.

Je rajouterai par la même occasion qu'il est préférable de créer les comportements du sous-menu en javascript, pour des raisons d'accessibilité et d'ergonomie, plutot que de chercher à bidouiller en html / css à base de :hover et display:none.
Modifié par Nigel (23 Aug 2010 - 17:22)

Ok je vais suivre tes conseils.