[RÉGLÉ] Menu horizontal multi-niveaux, problème de css

[lucvillalba]

Salut à tous,

Je suis en train de faire un template et je voudrai y intégrer un menu à plusieurs niveaux uniquement en css.

Mon problème, c'est que je n'arrive pas à afficher plus d'un niveau...

Voici mon css:

/*** Topmenu ***/
#topmenu ul{
margin: 0;
background : #0056ff url(../images/topbar_relief.png) top left repeat-x;
}
#topmenu ul li{
float: left;
height: 30px;
padding-left: 19px;
background : url(../images/menu_star.png) 5px center no-repeat;
}
#topmenu ul li a{
display: block;
color: #ff0000;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 6px 3px 6px 3px;
margin: 0 3px 0 3px;
}
#topmenu li:hover{
background : url(../images/menu_star.png) 5px center no-repeat, url(../images/topbar_relief_hover.png) top left repeat-x;
}
#topmenu li.active{
background : url(../images/menu_star.png) 5px center no-repeat, url(../images/topbar_relief_active.png) top left repeat-x;
}
/*** Top menu déroulant ***/
#topmenu ul li ul, #topmenu ul li ul li ul li{
position:absolute;
z-index:9999;
left: -999em;
width: auto;
}
#topmenu ul li:hover ul, #topmenu ul li ul li:hover ul li{
left: auto;
}

Donc dans mon top menu déroulant, tout va bien pour les 2 premiers hover mais je n'arrive pas à aller plus loin. Quand je passe la souris sur mon "sous menu 1 plus long", les niveaux suivant s'affichent TOUS et sans la couleur de fond, par contre les images de fond y sont.... J'ai essayé de rajouter les chemins css via firebug, je n'arrive pas à aller plus loin.

Voici une capture d'écran



Si quelqu'un voit d'où vient le problème...

Merci d'avance.

[ced1870]

Re : Menu horizontal multi-niveaux, problème de css

salut
pourquoi mettre un width auto ?
#topmenu ul li ul, #topmenu ul li ul li ul li{
position:absolute;
z-index:9999;
left: -999em;
width: auto;

[lucvillalba]

Re : Menu horizontal multi-niveaux, problème de css

Parce que j'avais un problème de largeur de ul enfants qui se mettaient à la largeur de l'ul parent mais c'est réglé, je l'ai enlevé maintenant.
Mais j'ai toujours mes sous-menu de niveau 2 et 3 qui s'affichent au survol du sous menu 1... Une piste?

PS: Super ton e-book sur la création de template 1.6! Il manquerait peut-être un chapitre sur les menu déroulants avec mootools ou jquery mais à part ça, c'est de la balle!!!...

[ced1870]

Re : Menu horizontal multi-niveaux, problème de css

merci !

PS: Super ton e-book sur la création de template 1.6! Il manquerait peut-être un chapitre sur les menu déroulants avec mootools ou jquery mais à part ça, c'est de la balle!!!...

ben là j'ai mon module Maximenu CK. On ne peut pas tout mettre dans le meme livre et plutot que d'expliquer, il suffit d'installer le module. D'ailleurs tu pourrais essayer de faire ton menu déroulant avec mon module :

http://www.joomlack.fr/extensions-joomla/maximenu-ck

Ca peut régler ton souci facilement, ne sait-on jamais

[lucvillalba]

Re : Menu horizontal multi-niveaux, problème de css

C'est à dire que j’aimerai que ce soit intégré au template car je voudrai le distribuer donc je ne veut pas de modules supplémentaires...

[ced1870]

Re : Menu horizontal multi-niveaux, problème de css

ben alors demandes à google un tuto suckerfish :

http://www.htmldog.com/articles/suckerfish/dropdowns/

[lucvillalba]

Re : Menu horizontal multi-niveaux, problème de css

Merci je vais me potasser tout ça...

[lucvillalba]

Re : Menu horizontal multi-niveaux, problème de css

C'est bon j'ai trouvé la solution à mon problème, pour ceux que ça interesse:

/*** Top menu déroulant ***/
#topmenu-normal ul li ul, #topmenu-normal ul li:hover ul li ul, #topmenu-normal ul li ul li:hover ul li ul, #topmenu-normal ul li ul li ul li:hover ul li ul{
position:absolute;
z-index:9999;
left: -999em;
}
#topmenu-normal ul li:hover ul, #topmenu-normal ul li ul li:hover ul, #topmenu-normal ul li ul li ul li:hover ul, #topmenu-normal ul li ul li ul li ul li:hover ul{
left: auto;
}

Merci Ced1870!!!!

[ced1870]

Re : Menu horizontal multi-niveaux, problème de css

ok cool ! merci pour le retour d'infos. J'ai passé ton sujet en Réglé, penses à le faire la prochaine fois