Menu full CSS à simplifier + bug de rendu

Bonjour,
Suis à un commentaire de la part de Heyoan à propos du code de mon menu, je me suis mise à la tâche de tenter de simplifier un peu le code.

Je sais les menu full CSS c'est zéro accessibilité via le clavier, mais je préfère laisser comme ça pour le moment. Je verrait plus tard pour l'accessibilité.

En attendant vous pourrez voir mon code d'origine ici

Suite à ma tentative d'épuration, je me retrouve avec quelques bug de rendu... trop compliqué à expliqué, constatez par vous-même sur cette page: -http://www.spypoint.com/2010/FR/accueil.html.
Il faut regarder les sous-menus, quand on descend à la dernière option même chose pour les sous-sous-menus mais en plus le problème se voit quand on passe dessus la première option.

Et voilà ou j'en suis dans le code:

div#menu{
	width: 928px;
	height:32px;
	cursor:pointer;
	position:relative; /*pour placer le menu dessus*/
}
div#menu ul{
	padding:0;
	margin:0;
	width: auto;
	display:block;
	list-style: none;
}
div#menu ul li{
	position: relative;
	list-style: none;
	height:32px;
	z-index: 600;
	float:left;
}

div#menu ul li li{
	display:block;
	position: absolute;
}

	/* acceuil */
div#menu ul li.accueil{
	background:url(../interface/images/Site2010-02.png) top no-repeat;
	width:106px;
}

	/* produits */
div#menu ul li.produits{
	background:url(../interface/images/Site2010-03.png) top no-repeat;
	width:110px;
}
div#menu li.sousmenu-produits01{
	background-color: #f08d21;
	height:25px;
	width:197px;
	top: 30px;
	left:2px;
}
div#menu li.sousmenu-cameras01{
	background:url(../interface/images/sous-menu/camerasSous.png) top no-repeat;
	height:25px;
	width:189px;
	top: -1px;
	left: 196px;
}
div#menu li.sousmenu-cameras02{
	background-color: #f08d21;
	height:24px;
	width:188px;
	top: 24px;
	left: 196px;
}
div#menu li.sousmenu-cameras03{
	background:url(../interface/images/sous-menu/camerasSous.png) bottom no-repeat;
	height:25px;
	width:189px;
	top: 47px;
	left: 196px;
}

div#menu li.sousmenu-produits02{
	background-color: #f08d21;
	height:24px;
	width:197px;
	top: 55px;
	left:2px;
}

div#menu li.sousmenu-produits03{
	background-color: #f08d21;
	height:25px;
	width:197px;
	top: 79px;
	left:2px;
}
div#menu li.sousmenu-produits04{
	background-color: #f08d21;
	height:25px;
	width:197px;
	top: 104px;
	left:2px;
}
div#menu li.sousmenu-produits05{
	background-color: #f08d21;
	height:25px;
	width:197px;
	top: 129px;
	left:2px;
}
div#menu li.sousmenu-produits06{
	background:url(../interface/images/sous-menu/ProduitsSous.png) bottom no-repeat;
	height:24px;
	width:199px;
	top: 154px;
	left:1px;
}

	/* photos et videos */
div#menu ul li.photos-videos{
	background:url(../interface/images/Site2010-04.png) top no-repeat;
	width:179px;
}
div#menu li.sousmenu-photos-videos01{
	background-color: #f08d21;
	height:27px;
	width:122px;
	top: 30px;
	left:2px;
}

div#menu li.sousmenu-photos-videos02{
	background-color: #f08d21;
	height:25px;
	width:122px;
	top: 57px;
	left:2px;
}
div#menu li.sousmenu-modeles2008-01{
	background:url(../interface/images/sous-menu/ModeleSous.png) top no-repeat;
	height:26px;
	width:93px;
	top: 0px;
	left: 121px;
}
div#menu li.sousmenu-modeles2008-02{
	background-color: #f08d21;
	height:23px;
	width:91px;
	top: 24px;
	left: 122px;
}
div#menu li.sousmenu-modeles2008-03{
	background:url(../interface/images/sous-menu/ModeleSous.png) bottom no-repeat;
	height:26px;
	width:93px;
	top: 47px;
	left: 121px;
}

div#menu li.sousmenu-photos-videos03{
	background:url(../interface/images/sous-menu/PhotosVideos-FR-Sous.png) bottom no-repeat;
	height:28px;
	width:124px;
	top: 82px;
	left:1px;
}
div#menu li.sousmenu-modeles2009-01{
	background:url(../interface/images/sous-menu/ModeleSous.png) top no-repeat;
	height:24px;
	width:93px;
	top: 0px;
	left: 122px;
}
div#menu li.sousmenu-modeles2009-02{
	background-color: #f08d21;
	height:24px;
	width:91px;
	top: 24px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-03{
	background-color: #f08d21;;
	height:25px;
	width:91px;
	top: 48px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-04{
	background-color: #f08d21;
	height:24px;
	width:91px;
	top: 72px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-05{
	background-color: #f08d21;
	height:24px;
	width:91px;
	top: 96px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-06{
	background:url(../interface/images/sous-menu/ModeleSous.png) bottom no-repeat;
	height:24px;
	width:93px;
	top: 120px;
	left: 122px;
}

	/* distributeurs */
div#menu ul li.distributeurs{
	background:url(../interface/images/Site2010-05.png) top no-repeat;
	width:148px;
}
div#menu li.sousmenu-distributeurs01{
	background-color: #f08d21;
	height:26px;
	width:214px;
	top: 30px;
	left:2px;
}
div#menu li.sousmenu-detaillantSous_02{
	background:url(../interface/images/sous-menu/DetaillantSous.png) top no-repeat;
	height:24px;
	width:96px;
	top: -1px;
	left: 214px;
}
div#menu li.sousmenu-detaillantSous_03{
	background-color: #f08d21;
	height:24px;
	width:96px;
	top: 23px;
	left: 214px;
}
div#menu li.sousmenu-detaillantSous_04{
	background:url(../interface/images/sous-menu/DetaillantSous.png) bottom no-repeat;
	height:24px;
	width:96px;
	top: 47px;
	left: 214px;
}

div#menu li.sousmenu-distributeurs02{
	background:url(../interface/images/sous-menu/DistributeursSous.png) bottom no-repeat;
	height:25px;
	width:216px;
	top: 56px;
	left:1px;
}

	/* commande en ligne */
div#menu ul li.commande{
	background:url(../interface/images/Site2010-06.png) top no-repeat;
	width:187px;
}
div#menu li.sousmenu-commande01{
	background-color: #f08d21;
	height:26px;
	width:101px;
	top: 30px;
	left:2px;
}
div#menu li.sousmenu-commande02{
	background-color: #f08d21;
	height:25px;
	width:101px;
	top: 56px;
	left:2px;
}

	/* support technique */
div#menu ul li.support{
	background:url(../interface/images/Site2010-07.png) top no-repeat;
	width:198px;
}
div#menu li.sousmenu-support01{
	background:url(../interface/images/sous-menu/Support-FR-Sous.png) top no-repeat;
	height:27px;
	width:140px;
	top: 30px;
	left:1px;
}
div#menu li.sousmenu-support02{
	background:url(../interface/images/sous-menu/Support-FR-Sous.png) center no-repeat;
	height:25px;
	width:140px;
	top: 57px;
	left:1px;
}
div#menu li.sousmenu-support03{
	background:url(../interface/images/sous-menu/Support-FR-Sous.png) bottom no-repeat;
	height:26px;
	width:140px;
	top: 82px;
	left:1px;
}
div#menu ul li:hover{
	background-position: bottom;
	height:33px;
}


div#menu ul.niveau2{
	display:none;
}  
div#menu ul ul a, #menu ul ul ul a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	text-align: left;
	padding: 3px 0 2px 0;
	margin-left: 10px;
	font-variant: small-caps;
	display: block;
	height:26px;
}

div#menu ul ul a:hover, #menu ul ul ul a:hover {
	color: #FFF;
	background-position: none;
}

div#menu ul.niveau3{
	display:none;
}

div#menu ul.niveau1 li:hover ul.niveau2{
	display:block;
}
div#menu ul.niveau2 li:hover ul.niveau3{
	display:block;
}

Donc, si quelqu'un peu m'aiguiller pour simplifier tout ça, tout en résolvant les petits bugs de rendu, ça serait bien apprécié!
Modifié par juliesunset (18 Aug 2014 - 22:01)

Petit up.
J'ai continué à bosser sur mon code et voilà ce que je constate, il semblerais que les lignes suivante:

div#menu ul li:hover{ 
    background-position: bottom; 
    height:33px; 
}

s'appliquent sur tout mon sous-menu. Hors j'aimerais qu'elles ne s'applique que sur le premier niveau du menu, sans affecter les niveau 2 et 3...

Comment puis-je y parvenir?

Ca serait pas tout bêtement:

div#menu ul.niveau1 li:hover {
background-position: bottom;
height:33px;
}



?? (ça paraît trop facile, lol )

Gueuxlegueux a écrit :
(ça paraît trop facile, lol )

Oui puisque ce sélecteur continuera de cibler tous les descendants de l'élément UL (enfants, petits-enfants, etc.).

Pour ne sélectionner que les éléments LI enfants :

div#menu ul.nivau1 > li:hover {  

cf. les sélecteurs.
Modifié par Heyoan (16 Jan 2010 - 00:49)