28172 sujets

CSS et mise en forme, CSS3

Ajouter un menu de deuxième et de troisième niveau en css

Bonjour, voila j'essaie depuis des jours à rajouter un deuxième niveau et un troisième à mon menu sous css mais je n'y arrive pas. POuvez vous m'aider s'il vous plait?
Voici mon css:


.nav2 {

	/*position: absolute;*/
	left: auto;
	/*top: 138px;*/
	float:left;
	width:744px;
	border:none;
	color:black;
	font-size:1.0em;
	font-size:130%;
	text-align: center;
	background:transparent url(images/blueslate_background.jpg) repeat-x top left;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	text-transform:uppercase;
}
.nav2 ul {
	list-style-type:none;

}
.nav2 ul li {
	float:left;
	position:relative;
	z-index:1000;
	border-collapse:collapse;

}
.nav2 ul li ul {
	display:none;
	border:none;

}
.nav2 ul li ul {
	margin-left:-30px;
	padding:0 30px 30px 30px;

}
.nav2 ul li a {
	float:left;
	display:block;
	height:3.1em;
	line-height:3.1em;
	padding:0 16px 0 16px;
	text-decoration:none;
	font-weight:bold;
	color: white;
	text-align: left;
}
.nav2 ul li:hover {
	width:auto;
	background:transparent url(images/blueslate_backgroundOVER.gif);
	/*tena izy*/
	z-index: 10;

}
.nav2 table {
	position:absolute;
	z-index:999;
	top:0;
	left:0;
	border-collapse:collapse;
}
.nav2 ul li:hover a {
	text-decoration:none;

}
.nav2 ul li:hover ul {
	display:block;
	position:absolute;
	z-index:998;
	top:3.0em;
	margin-top:0.1em;
	left:0;
}
.nav2 ul li:hover ul li ul {
	display: none;
}
.nav2 ul li:hover ul li a {
	display:block;
	width:10em;
	height:auto;
	line-height:1.3em;
	margin-left:-1px;
	padding:4px 16px 4px 16px;
	border-left:solid 1px #004e6e;
	border-bottom: solid 1px #004e6e;
	background-color: #006999;         
	font-weight:normal;
	color:white;
	font-weight: bold;
}
.nav2 ul li:hover ul li a:hover {
	background-color: #02a0e8;
	text-decoration:none;
}


Merci d'avance, vous me sauvez la vie!!
:) j'y arrive pas je t'envoie le code que j'ai fait mais ça donne un truc tout décalé et le fond des ul ne sort pas...j'ai oublié je débute completment


#nav {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 138px;
	display:block;
	height:42px;
	font-size:11px;
	font-weight:bold;
	text-align: center;
	background:transparent url(images/blueslate_background.jpg) repeat-x top left;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	text-transform:uppercase;

	float:left;
	width:744px;
	border:none;
	color:black;
	font-size:1.0em;
	font-size:130%;
	text-align: center;
}
#nav ul li{
	display:block;
	float:left;
	margin:0 0 0 0;
	height: 42px;
	background:transparent url(images/blueslate_backgroundOVER2.gif) repeat-x;
	padding: 0;
}
#nav ul li a{
	display:block;
	float:left;
	color:#D5F1FF;
	text-decoration:none;
	padding:7px 0px 0 7px;
	height:28px;
}

#nav li a {
	color: #fff;
	padding-top: 12px;
	font-weight: bold;
}
#nav li:hover, #nav li a:hover{
	background:transparent url(images/blueslate_backgroundOVER2.gif) repeat-x;
	color: white;
}
#nav ul li a:hover{
	color: #fff;
}
#nav ul { /* toutes les listes */
	margin:0px;
	padding:0;
	list-style-type:none;
	width:auto;
	top: auto;
}

#nav a { /*pour tous les liens du menu*/
	display: block;
	width: auto;
	text-decoration: none;
	color: white;
}
#nav a:hover {
	font-weight: bold;
	padding: auto;
}

#nav li { /* tous les items de liste */
	float: left;
	width: 13em; /* largeur obligatoire, sinon opera devient fou */
	height: 3em;
	border-right: 1px solid #a5d7f1;
	border-left: 1px solid #a5d7f1;
	border-collapse: collapse;
}

#nav li ul { /* listes de deuxième niveau */
	position: absolute;
	background: #48b4ff;
	width: 13em;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
	text-align: left;
}

#nav li ul ul { /* listes de troisième niveau et plus */
	margin: 0em 0 0 13em;
	text-align: left;
	border-left: 1px solid #a5d7f1;	
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	background:transparent url(images/blueslate_backgroundOVER2.gif) repeat-x;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
	color: white;
	background:transparent url(images/blueslate_backgroundOVER2.gif) repeat-x;
}
J'ai suivi un tuto mais j'arrive pas a obtenir le design d'origine
Bonjour, c'est une liste imbriqué genre


<ul>
<li>
<ul><li></li><li></li></ul>
</li>
<li></li>
</ul>


Merci d'avance
Salut,
T'as pas ton fichier en ligne ?
Ou tut veux pas faire un petit jsFiddle/jsBin pour voir ?
On ne sait même pas ce que tu veux...
Par défaut, si tu encapsules une liste dans une autre, la liste interne est décalée vers la droite... Ca fait bien plusieurs niveaux...
upload/45646-Voila.jpg
voila, en bas il y a ce que je veux faire et en haut ce que j'ai obtenu grace au tuto, le design du bas est bien sur sans le menu de deuxième niveu mais je l'ai ajouté via gimp. Merci
Bonjour,

Pour nous aider à t'aider, ce serait mieux de disposer d'un fichier en ligne afin de pouvoir tester ton résultats actuel CSS + HTML. Tu n'as pas de serveur sur lequel mettre tes fichiers ?

Tu aussi utiliser un service web comme jsFiddle, ce sera déjà plus pratique.
Modifié par audrasjb (27 Jul 2012 - 13:51)
Accessoirement, un menu déroulant sur 3 niveau en full CSS, c'est du suicide d'ergonomie (l'accessibilité est déjà morte au deuxième niveau).
Sujet clos
Aller à