28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu déroulant qui ne déroule plus sous IE 6 et inférieur

Bonjour,

J'ai un menu déroulant qui ne déroule plus sous explorer 6 ou inférieur, et qui marche sous les autres navigateurs (voir exemple http://www.dismoitout.fr/menu.htm)

Ce n'est pas original, mais ce qui m'énerve, c'est que j'ai déjà fait plusieurs menus avec ce code et que je n'ai jamais eu de problèmes.

Je sais aussi qu'il vaut mieux utiliser css/javascript (ce que je ferai si je ne trouve pas la solution), mais pour des raisons techniques et personnelles, ET SURTOUT PARCE QUE J'AIMERAIS BIEN COMPRENDRE, je préfèrerais éviter.

Si qq voit l'erreur merci d'avance ...

Code html : 

<body>
<div id="listmenu">
		<ul>
                <li><a title="#" href="#" target="_self">Menu 1</a>
                    <ul>
                        <li><a href="#" target="_self">Sous Menu 1</a></li>
                        <li><a href="#" target="_self">Sous Menu 2</a></li>
                        <li><a href="#" target="_self">Sous Menu 3</a></li>
                    </ul>
                </li>
                <li><a title="#" href="#" target="_self">Menu 2</a>
                    <ul>
                        <li><a href="#" target="_self">Sous Menu 1</a></li>
                        <li><a href="#" target="_self">Sous Menu 2</a></li>
                        <li><a href="#" target="_self">Sous Menu 3</a></li>
                    </ul>
                </li><li><a title="#" href="#" target="_self">Menu 3</a>
                    <ul>
                        <li><a href="#" target="_self">Sous Menu 1</a></li>
                        <li><a href="#" target="_self">Sous Menu 2</a></li>
                        <li><a href="#" target="_self">Sous Menu 3</a></li>
                    </ul>
                </li>
            </ul>
</div><!-- fin de la div listmenu -->
</body>


Code CSS : 

*html div#listmenu ul {border-left: 1px ; } 
*html div#listmenu ul li ul {border-left: 1px;}
body div#listmenu ul li ul{display: none;}
div#listmenu { width:750px; padding: 0px; margin: 0px; height:30px; background-color: #222725; }
div#listmenu a { font-family:Geneva, Arial, Helvetica, sans-serif; background-color: #222725; display: block; padding: 0 10px; padding-top:2px; font-size: 12px; color: white; text-decoration: none; font-weight: bold; }
div#listmenu a:hover, active { color: #FF6600; text-decoration: underline; font-weight: bold; }
div#listmenu ul { margin: 0;  padding: 0; }
div#listmenu li { line-height: 25px; float:left; width: 125px; position: relative; list-style-type: none; padding: 0; margin: 0; }
div#listmenu li:hover { background-color: #cc3333; }

div#respond {background-color: #222725;}
div#respond:hover {background-color: #222725;}
div#listmenu ul li ul{ background-color: #222725; position: absolute; width: 10em; left:-1px; float: left; padding: 0; margin: 0; }
div#listmenu ul li ul li{ text-align: left; width:100%; float: left; padding-top: 3px; }
div#listmenu ul li ul li:hover { background-color: #222725; }
div#listmenu ul li ul li:first-child{ float: left; }
div#listmenu ul li:hover ul {display: block;}
div#listmenu ul li:hover ul, div#listmenu ul li ul:hover {display: block;}

Modifié par JLV25 (01 Sep 2008 - 10:21)
Bon j'ai pigé l'erreur ... j'avais bien mis mon fichier "csshover.htc" dans le dossier css mais j'avais oublié de le déclarer dans ma css principale comme suit :
html, body { height: 100%; margin: 0; padding: 0; behavior:url(css/csshover.htc); }


Ce qui explique pourquoi cela marchait sur un site et pas sur l'autre. Ce fichier "csshover.htc" est hyper pratique pour créer des menus déroulants horizontaux uniquement en css et en évitant Javascript.

Le code de ce post fonctionne nickel, notamment le css que j'ai mis un moment à finaliser
Modifié par JLV25 (01 Sep 2008 - 10:20)
JLV25 a écrit :
Ce fichier "csshover.htc" est hyper pratique pour créer des menus déroulants horizontaux uniquement en css et en évitant Javascript.


Pas vraiment, car un fichier .htc est un fichier javascript.
Sujet clos
Aller à