Menu deroulant horizontal CSS

[lorinthal]

Je suis en train de développer un site en php. J'ai fait un CSS pour le menu horizontal dont voici le code :

#menu
{
vertical-align:middle;
}

#menuDeroulant
{
 list-style-type: none; /*empêche l'affichage des puces */
 margin: 0;
 padding: 0;
}

#menuDeroulant ul
{
position: absolute; 
margin:0px; 
padding: 0px; 
}

#menuDeroulant li
{
 float: left;
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
}	

#menuDeroulant ul
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}			

#menuDeroulant ul li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: none;
 border-right: none;

}	

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: auto;
 margin: 0;
 padding: 4px 8px;
 border-right: none;
 text-decoration: none;
}

#menuDeroulant li a:hover { background-color: #9d9a9a; } /* fond du menu au passage de la souris	   -	  hover : quand la souris est sur le lien*/
#menuDeroulant li a:active { background-color: #FBEACE; } /* fond du menu déroulant	  -		 active : style particulier au moment du clic*/
#menuDeroulant li:hover ul { display: block; }

#menuDeroulant ul li a:link,
#menuDeroulant ul li a:visited
{
 display: block;
 color: white;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: #bb6767;
}

#menuDeroulant ul li a:hover
{
 background-image: none;
 background-color: 9d9a9a; /* pour la surbrillance du menu déroulant au passage de la souris*/
 color: #f7e0ca;
}

La partie html est toute simple :

<!--  Menu haut-->
<ul id="menuDeroulant"> 
	<li>
		<a href="../index.php" title="">Accueil</a>
	</li>
	<li>
		<a href="page1.php" title="">menu1</a>
			<ul>
				<li><a href="#" title="">Option1</a></li>
				<li><a href="#" title="">Option 2</a></li>
			</ul>
	</li>
	<li>
		<a href="page2.php" title="">menu2</a>
			<ul>
				<li><a href="#" title="">Option1</a></li>
				<li><a href="#" title="">Option 2</a></li>
			</ul>
	</li>
	<li>
		<a href="page3.php" title="">menu3</a>
			<ul>
				<li><a href="#" title="">Option1</a></li>
				<li><a href="#" title="">Option 2</a></li>
			</ul>
	</li>
</ul>

C'est pour le boulot, j'ai déjà essayer plein de code sur différent sites sans succès. J'ai déjà perdu du temps en recherchant alors maintenant je vous demande de m'aider s'il vous plaît... Le problème est dans la description du sujet.

Merci d'avance de prendre le temps de me lire.

Lorinthal

[lorinthal]

Je fais une réponse pour détailler un truc. Je suis nouvelle sur ce site et quand j'ai voulu faire editer cela n'a pas fonctionner. Tant pis :

l'erreur se situe à ce niveau là :

#menuDeroulant li:hover ul { display: block; }

Apparemment IE7 ne comprend pas cette ligne. Par quoi puis-je la remplacer ?

[Dudu]

Salut

Je ne sais pas si Explorer 7 prend en compte les :hover sur d'autres balises que <a> (je sais qu'IE 6 ne prenait en compte que les <a>, ce qui était une erreur).

Essaie peut-être

#menuDeroulant li a:hover ul {display: block;}

Sans garantie car pas testé, je n'ai pas Explorer sur ma machine

PS: effectivement, les nouveaux membres ont des possibilités d'édition limitées. Petit à petit, au fur et à mesure de ton activité sur le Hub, ces limitations s'assoupliront automatiquement.

[lorinthal]

Salut,

Merci d'avoir pris le temps de me répondre car tu es bien le seul jusqu'à maintenant. Je sais que le css est un sujet que beaucoup abordé dans les forums.

J'ai déjà testé ton idée mais cela n'avait pas fonctionner.

A force de persévérance, j'ai cependant fini par trouver un code css tout fait avec un exemple et deux fichiers javascript qui fonctionne aussi bien sous Firefox 3 et sous IE7. Je suis en train de l'adapter à ma sauce. Maintenant, c'est un souci de décalage sous IE qu'il n'y a pas sous Firefox, mais je sais que beaucoup ont déjà eu ce problème alors je ne devrais pas avoir de souci à trouver une solution.

Voilà l'endroit où j'ai trouvé un bon code !

http://dosimple.ch/articles/Menus-dynamiqu...nuVertical.html

Merci encore !

Lorinthal

Euh... question ! Y aurait pas un endroit pour dire que le problème est résolu ?

Lorinthal.

[ghost]

Bonjour,

Ton code initial devrait fonctionner pour ie7 à condition de l'intégrer dans un code ayant un doctype valable sinon, ce charmant jeune homme passe en mode quirks et là on a des surprises... voir là

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Par exemple...

Pour l'espace entre les li du sous menu, tente de modifier:

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
margin: 0;
padding: 4px 8px;
border-right: none;
text-decoration: none;
}

par...


#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;/*----------------*/
margin: 0;
padding: 4px 8px;
border-right: none;
text-decoration: none;
}

[lorinthal]

Salut !

Désolée de ne répondre que maintenant.

Le problème venait du doctype qui n'était pas complet effectivement !

Mon menu marche nickel maintenant ! Merci beaucoup !

A la prochaine !