Menu déroulant en css

corven · le 28 mars 2006

Bonjour à tous !

J'ai un petit problème avec un menu déroulant fait en css, il fonctionne parfaitement sous FF mais sous IE (comme toujours c'est celui là qui saoule !) il ne veut pas afficher le menu déroulant au passage de la souris sur le titre du menu.

Est ce que vous pouvez y jeter un petit coup d'oeil s'il vous plait ?

Je vous mets le code :

Le fichiers html avec le css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3c.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Oltana.net - la référence informatique</title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Lanquage"content="en-us" />


<style type="text/css">
body { font-family: verdana; arial; sans-serif; font-size: 100%; behavior: url(css/csshover.htc); }
body div#listmenu ul li ul { display: none; }

* { margin: 0; padding: 0;}

div#listmenu {
width: 380px;
float: left;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
font-size: .8em;
background-color: #CCF;
margin-top: 20px; 
}

div#listmenu ul {
margin: 0px 0px 0px 30px;
}

div#listmenu li {
float: left;
background-color: #FFA;
list-style-type: none;
padding: 0px 0px;
border-right: 1px solid #000;
position: relative;
}

div#listmenu li:first-child {
border-left: 1px solid #000;
}

div#listmenu li:hover {
background-color: #FFF;
}

div#listmenu a {
display: block;
text-decoration: none;
color: #000;
background-color: #DDD;
padding: 0px 6px;
}

div#listmenu a:hover {
color:#F33;
}

* html div#listmenu ul {
float: left;
border-left: 1px solid #000;
margin left: 0px;
}

* html div#listmenu ul li ul {
border-top: 1px solid #000;
border-left: 0px;
}

div#listmenu ul li ul {
margin: 0px;
position: absolute;
width: 10em;
margin-left: -1px;
}

div#listmenu ul li ul li  {
width: 100%;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}

div#listmenu ul li ul li:first-child {
border-top: 1px solid #000;
}

div#listmenu ul li:hover ul, div#listmenu ul li ul:hover {
display: block;
}



</style>
</head>




<body>

<div id="listmenu" class="clearfix">
<ul>
<li><a href="#">Accueil</a>
</li>

<li><a href="#">Site</a>
	<ul>
		<li><a href="#">01</a>
		<li><a href="#">02</a>
		<li><a href="#">03</a>
	</ul>
</li>

<li><a href="#">Communauté</a>
	<ul>
		<li><a href="#">01</a>
		<li><a href="#">02</a>
		<li><a href="#">03</a>
	</ul>
</li>

<li><a href="#">Dossiers</a>
	<ul>
		<li><a href="#">01</a>
		<li><a href="#">02</a>
		<li><a href="#">03</a>
	</ul>
</li>

<li><a href="#">Gallerie</a>
</li>


</ul>
</div>

</body>
</html>

Vous aurez besoin aussi d'un fichier nommé csshover.htc que l'on peut télécharger ici mais je ne savais pas trop quoi prendre comme code dans cette page, si vous pouviez vérifier que j'ai bien tout pris ...

Le fichier csshover.htc à mettre dans un dossier nommé " css "

ul ul, li:hover ul ul { /* specificity: 2 and 13 */ display:none; } 
li:hover ul, li:hover li:hover ul { /* specificity: 12 and 23 */ display:block; }

Voilà, je vous en remercie d'avance !

:byebye:

Baldurien · le 28 mars 2006

normal.

IE est un batard entre CSS1 & 2.

En outre, il ne supporte pas la pseudo classe :hover ailleurs que sur l'élément a (les liens).

Voilà

Pas de solutions sans buter du Billou.

corven · le 28 mars 2006

:byebye:

Bon bah je crois que je vais devoir aller aux states ... :transpi:

Billou c'est un peu à la manière de Villepin en ce moment, il ne veut rien entendre ... dommage ... (espèrons que ie7 soit moins pire)

Contraint à utiliser du JS ... pitoyable ...

Merci à toi pour la réponse !

Donald.Dingue · le 29 mars 2006

Je te suggère d'aller faire un tour sur :

http://css.maxdesign.com.au/listamatic/index.htm

et

http://css.maxdesign.com.au/listamatic2/index.htm

Tu trouveras quantités de menus en CSS de bonne qualité !

Perso je n'aime pas Javascript, c'est une question de goût et d'accessibilité. Javascript est un langage qui s'execute du côté client et peut générer des erreurs, et de plus il peut aussi tout simplement ne pas être activé sur l'ordinateur du visiteur.

corven · le 29 mars 2006

Je te remercie, je vais y jeter un coup d'oeil ...

Perso le JS j'aime pas trop non plus, plus je peux en faire en css plus je serais content du résultat, même si des fois IE n'aime pas vraiment...

:francais:

Baldurien · le 30 mars 2006

Je dirais que tu peux faire un mix savant des deux avec les commentaires conditionnels (que ie gère)

corven · le 5 avril 2006

Bonjour !

Bon j'ai trouvé un truc qui a priori marche mais je n'arrive pas à le faire fonctionner dans mon cas ...

Pour résumé mon affaire, je voudrais que mon menu déroulant s'affiche sous IE ... celui ci étant fait en css.

Tout est normalement expliquer à cette adresse : http://www.xs4all.nl/~peterned/csshover.html

On va dire que j'ai pas mal de difficulté à modifier la chose pour que ça marche correctement ...

Ca fait plusieurs jours que je planche là dessus et je sèche un peu beaucoup là ...

Je vous remets le code xhtml :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3c.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<LINK REL=STYLESHEET TYPE="text/css" HREF="css/menu.css">


<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Lanquage"content="en-us" />


<style type="text/css">
body {  background-color: #575757; margin-top: 6px; margin-left: 0px; margin-right: 0px; text-align: center; min-width: 1000px; }
body div#liste_menu ul li ul { display: none; }

div#global_site { width: 999px; margin-top: 6px; margin-left: auto; margin-right: auto; text-align: left; }


div#liste_menu { display: block; width: 999px; align: middle; }
div#liste_menu ul li { list-style-type: none; float: left; text-align: center; font-family: verdana; font-size: 13px; }
div#liste_menu ul li a { display: block; background-image: url('images/bouton01.gif'); background-repeat: no-repeat; width: 131px; height: 47px; }
div#liste_menu ul li a:link { text-decoration: none; color: #FFFFFF; font-weight: bold; }
div#liste_menu ul li a:hover {text-decoration: none; color: #FF9900; background-image: url('images/bouton02.gif'); font-size: 14px; font-weight: bold; padding-top: 5px;}
div#liste_menu ul li a:visited {text-decoration: none; color: #000000;}

div#liste_menu ul li ul li { margin-left: -40px; list-style-type: none; float: none; text-align: center; font-family: verdana; font-size: 11px; background-color: #FDC346; }
div#liste_menu ul li ul li a { display: block; background-image: none; background-color: #EEEEEE; width: 131px; height: 15px; }
div#liste_menu ul li ul li a:link { text-decoration: none; color: #FF9900; font-weight: bold; }
div#liste_menu ul li ul li a:hover {text-decoration: none; color: #FFFFFF; background-image: none; background-color: #FF9900; font-size: 12px; font-weight: bold; }
div#liste_menu ul li ul li a:visited {text-decoration: none; color: #FF9900;}

div#liste_menu ul li:hover ul, div#liste_menu ul li ul:hover { display: block; }


</style>
</head>

<body>
<div id="global_site">

	<div id="liste_menu">
		<ul>
			<li><a href="#">Accueil</a>
				<ul>

					<li><a href="#">sous menu 01</a></li>
					<li><a href="#">sous menu 02</a></li>
					<li><a href="#">sous menu 03</a></li>
					<li><a href="#">sous menu 04</a></li>

				</ul>
			</li>
			<li><a href="#">Site</a></li>
			<li><a href="#">Communauté</a></li>
			<li><a href="#">Dossiers</a></li>
		</ul>
	</div>


</div><!-- FIN DE GLOBAL_SITE -->
</body>
</html>

Encore merci de bien vouloir vous pencher sur mon problème ...

:chinois:

Connexion

Menu déroulant en css

Messages recommandés

corven

Lien vers le commentaire

Partager sur d’autres sites

Baldurien

Lien vers le commentaire

Partager sur d’autres sites

corven

Lien vers le commentaire

Partager sur d’autres sites

Donald.Dingue

Lien vers le commentaire

Partager sur d’autres sites

corven

Lien vers le commentaire

Partager sur d’autres sites

Baldurien

Lien vers le commentaire

Partager sur d’autres sites

corven

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité