28173 sujets

CSS et mise en forme, CSS3

[RÉSOLU] Menu CSS avec 3 niveau

Bonjour à tous !

J'ai besoin de votre aide pour mon menu en CSS.

Mon menu fonctionne super bien jusqu'a ce que je veule ajouter un 3e niveau dedans.

Voici mon menu en test : http://kskcompany.com/test/

Dans le menu : Vêtement il y a un sous menu qui ce dernier a encore un sous menu.

J'ai résussis a les faires apparaitres correctement mais il me reste le :hover qui ne fonctionne pas et j'ai passé énormément de temps a essayer de trouver mon problème mais j'y arrive pas.

Je vous montre mon code CSS 

#topWrapper, .menu {    
width: 960px;    
max-width: 960px;    
min-width: 960px;
}

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:15.3px;
	font-weight:bold;
	}
.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:#333333 url("images/seperator.gif") bottom right no-repeat;
		color:#cccccc;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 17px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:113px;
		z-index:200;
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:112px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}	
		
	.menu li ul ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:-35px 0 0 112px;
		border:0px;
		position:absolute;
		width:112px;
		z-index:200;
		}
			.menu li ul ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
			.menu li ul ul li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:112px;}

		.menu li ul ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul ul li a:hover, .menu li ul ul li:hover a{
			background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
			.menu li:hover ul ul li{
		display:block;
		
		}
			.menu li:hover ul ul li a{
		background:none;
		
		}


Pouvez vous me le corriger afin que lorsque je passe la souris dans le menu, la couleur de background change adéquatement.

Merci infiniement de votre aide !!
Modifié par ixel (21 Aug 2012 - 22:41)
Regarde bien dans ton html le chemin/balisage de ton dernier niveau. T'as zappé un li dedans.
Ca marche avec cette modification :
http://kaxz01.free.fr/test/alsa/alsa1.html

Je te mettrais le code si vraiment tu trouves pas, mais là vu que c'est surtout une erreur d'inattention, autant que tu t'en rends compte par toi même. Enfin c'est le genre d'erreur d'inattention qui te fait chercher pendant des plombes ^^ les joies du code...
Modifié par Ozymandias (21 Aug 2012 - 05:20)
Franchement je ne vois pas eu je peux avoir zappé un <li>

J'utilise notepad++ et chaque <li> a son </li>

Je suis un débutant en Web alors j'aimerais bien ton coup de main la dessus
Désolé la j'ai pas été très clair. Je voulais dire que tu as zappé un li non pas dans ton html, mais ton CSS. Ton code html est correct. Mais dans ton html si tu suis le chemin des ul et li menant à ton dernier niveau de menu, tu remarqueras que tes derniers bloc dans ton fichier Css font réference a des balises qui n'existent pas.

ul li ul li , li ul ul toussa ....

;)

Regarde :
<ul>
			<li><a href="index.html" >Acceuil</a></li>
			<li><a href="#">Vêtements</a>
				<ul>
                <li><a href="#">T-Shirts</a>
					<ul>
					<li><a href="#">1</a></li><li><a href="#">2</a></li></ul></li>


Le chemin c'est ul, li, ul, li, et toi tu avais mis ul, ul, li. T'avais zappé que pour ouvrir l'autre ul dans ton menu, il t'a fallu ouvrir un li aussi.

.menu li ul li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:-35px 0 0 112px;
		border:0px;
		position:absolute;
		width:112px;
		z-index:200;
		}
			.menu li ul li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
			.menu li ul li ul li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:112px;}

		.menu li ul li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul li ul li a:hover, .menu li ul li ul li:hover {
			background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
			border:5px;
			color:#ffffff;
			text-decoration:none;
			}
			.menu li:hover ul li ul li{
		display:block;
		
		}
			.menu li:hover ul li ul li a{
		background:none;
		
		}


De rien Smiley smile
Modifié par Ozymandias (21 Aug 2012 - 05:38)
Wow vraiment MERCI !!!

En effet c'est une erreur d'innatention mais serieusement j'ai chercher et jamais que je m'en suis aperçu.

Je vais pouvoir arreter de me casser la tête et me coucher maintenant Smiley smile

MERCI MERCI encore
Finalement je me suis rendu compte que j'ai encore un problème.
Je me suis donc permis d'enlever le [résolu]

je vous redonne le lien dans ma barre de menu test : http://kskcompany.com/test/

Vous allez remarquer que lorsque vous mettez la souris sur "Vêtements" le 3e sous-menu s'affiche automatiquement... alors qui devrais seulement s'afficher lorsque la souris est sur "Pour Hommes" ou encore sur "Pour Femmes".

Et ne devrait pas apparaître lorsque je suis sur les autre menus tel que "calottes"

C'est surement encore dans mon CSS que j'ai fait une gaffe mais je suis tout mêler la dedans maintenant.

Pouvez-vous m'aider encore s.v.p.
Je vous remercie a l'avance

EDIT: Laisser tomber j'y suis arriver finalement

J'ai ajouter ceci dans mon CSS

			.menu li:hover ul li ul li{
		display:none;
		
		}
					.menu li ul li:hover ul li {
		display:block;
		
		}

Modifié par ixel (21 Aug 2012 - 22:40)
Sujet clos
Aller à