28172 sujets

CSS et mise en forme, CSS3

Problème menu déroulant

Bonjour à tous,

Petit problème avec un menu déroulant comportant un sous - sous menu...

Je ne parviens pas à faire en sorte que mon sous - sous menu réagisse comme mon sous-menu.

J'espère que vous me comprenez?


Voici le code HTML : 

<div id="menu">
   <ul>
        <li><a href="#">Accueil</a></li>
        <li>
                <a href="#">Equipes</a>
                 <ul>
                        <li><a href="#">Messieurs</a>
                             <ul>
                                 <li><a href="#">P1 Jeunes</a></li>
                                 <li><a href="#">P1 Vieux</a></li>
                                 <li><a href="#">P3 Jeunes</a></li>
                             </ul> 
                
                        </li>
                        <li><a href="#">Dames</a>
                             <ul>
                                 <li><a href="#">P2</a></li>
                                 <li><a href="#">P3</a></li>                                                  
                             </ul>                        
                        </li>
            
                         <li><a href="#">Jeunes</a>
                             <ul>
                                 <li><a href="#">Scolaires Garçons</a></li>
                                 <li><a href="#">Minimes filles</a></li>
                                                     
                             </ul>
                        </li>
                </ul>
        </li>

        <li><a href="#">Classements</a></li>
        <li><a href="#">Calendrier</a></li>
        <li><a href="#">Sponsors</a></li>
        <li><a href="#">Contact</a></li>
</ul> </div>



Voici le code CSS :

#menu
   {
      height: auto;
      width: 700px;
      margin: 30px auto;
   }

#menu ul {
 margin:0;
 padding:1px;
 list-style-type:none;
 text-align:center;
 }

#menu li {
 float:left;
 margin:auto;
 padding:0;
 }
#menu li a {
 display:block;
 width:100px;
 color:#E5E5F0;
 text-decoration:none;
 padding:5px;

 }

#menu li a {
 display:block;
 width:100px;
 color:#E5E5F0;
 text-decoration:none;
 padding:5px;

 }
#menu li a:hover {
 color:#4169E1;
 }

#menu ul li ul {
 display:none;
 background-color: #143358;
}


#menu ul li:hover ul {
 display:block;
    background-color: #143358; 
 }

#menu li:hover ul li {
 float:none;
  background-color: #143358;
 font-size: 12px;
 }



Pourriez-vous m'expliquer comment faire pour que mon sous-sous menu se mette à droite du sous menu lors du survol?


Je vous en remercie d'avance !
Modifié par Finplein (31 May 2012 - 17:06)
Bonjour,

Je vais essayer tout ça ...

C'est donc impossible à faire avec du CSS?

Merci pour le lien !
Bonjour à toutes et à tous,

je ne vois pas l'intérêt de faire cela en Javascript !
Sinon, voici quelque chose qui est entièrement fait en HTML et CSS !
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript"></script>

<style rel="stylesheet" type="text/css">
body {
		background-color	: white;
}

/*------------------------*/
/*     Premier Niveau     */
/*------------------------*/

ul#menu {
		background-color	: red;
		list-style-type		: none;
		text-align			: center;

		margin				: 30px auto;
		padding				: 0;
		border				: 0 none;

		width				: 420px;
}

ul#menu li {
		display				: inline-block;
		margin				: 0;
		padding				: 0;
		border				: 0 none;

		position			: relative;
}

ul#menu li a {
		text-decoration		: none;
		padding				: 5px;
		color				: #E5E5F0;
}

ul#menu li:hover a {
		color				: #4169E1;
}

/*-------------------------*/
/*     Deuxième Niveau     */
/*-------------------------*/

ul#menu li ul {
		background-color	: #143358;
		list-style-type		: none;
		text-align			: left;

		margin				: 0;
		padding				: 0;
		border				: 0 none;

		position			: absolute;
		top					: 20px;
		left				: 0;
		width				: 70px;
}

ul#menu li ul li {
		display				: none;
}

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

ul#menu li:hover ul li a {
		text-decoration		: none;
		padding				: 5px;
		color				: #E5E5F0;
}

ul#menu li:hover ul li:hover a {
		color				: #4169E1;
}

/*-------------------------*/
/*     Troisème Niveau     */
/*-------------------------*/

ul#menu li ul li ul {
		background-color	: red;
		list-style-type		: none;
		text-align			: center;

		margin				: 0;
		padding				: 0;
		border				: 0 none;

		position			: absolute;
		top					: 0;
		left				: 70px;
		width				: 120px;
}

ul#menu li:hover ul li ul li {
		display				: none;
}

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

ul#menu li:hover ul li:hover ul li a {
		text-decoration		: none;
		padding				: 5px;
		color				: #E5E5F0;
}

ul#menu li:hover ul li:hover ul li:hover a {
		color				: #4169E1;
}
</style>
</head>

<body>
	<ul id="menu">
		<li><a href="#">Accueil</a></li>
        <li><a href="#">Equipes</a>
			<ul>
				<li><a href="#">Messieurs</a>
					<ul>
						<li><a href="#">P1 Jeunes</a></li>
						<li><a href="#">P1 Vieux</a></li>
						<li><a href="#">P3 Jeunes</a></li>
					</ul>
				</li>
				<li><a href="#">Dames</a>
					<ul>
						<li><a href="#">P2</a></li>
						<li><a href="#">P3</a></li>
					</ul>
				</li>
				<li><a href="#">Jeunes</a>
					<ul>
						<li><a href="#">Scolaires Garçons</a></li>
						<li><a href="#">Minimes filles</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Classements</a></li>
		<li><a href="#">Calendrier</a></li>
		<li><a href="#">Sponsors</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</body>
</html>


@+
Artemus24 a écrit :
je ne vois pas l'intérêt de faire cela en Javascript !
Parce qu'un menu à trois niveaux en CSS pur c'est du suicide ergonomique (et accessible) ?



Finplein, si tu ne gère pas JavaScript, le mieux et de revoir ton menu. Trois niveaux, c'est souvent le signe d'un problème de structure.
Finplein a écrit :

C'est donc impossible à faire avec du CSS?
Merci pour le lien !



De rien, nan c'est pas impossible du tout mais ce n'est pas recommandé pour les raisons données par Laurie-Anne
Bonjour à toutes et à tous,

@ Laurie-Anne : je suis de ton avis !
Un menu à trois niveaux n'est pas la solution !
Il y a surcharge d'informations et ce n'est pas très esthétique.

Je donne une solution en HTML et CSS pour montrer qu'on peut le faire.
Mais je ne le recommande pas du tout.

@ Finplein : je crois que tu dois revoir la présentation de ton menu.
Un menu à 1 niveau serait bien plus esthétique.
Lorsque tu as sélectionné ton choix, tu vas sur une nouvelle page où le nouveau menu correspond au niveau 2 de ta sélection et ainsi de suite.

@+
Sujet clos
Aller à