Bonjour à toutes et à tous,
Voilà, je suis en train de faire un site avec Joomla 2.5, et le template MaxGaming TG que l'on peut modifier.
Je travaille pour l'instant en local du coup je ne peux pas envoyer de lien, ni d'url d'image en exemple...
Mon problème est simple: ce template offre un menu principal horizontal avec les sous-menu qui apparaissent en liste verticale au passage de la souris.
J'aimerais moi que les sous menus s'ouvre en menu horizontal également, et restent visibles une fois le menu cliqué. Exemple: http://www.lepoint.fr/
Comme vous pouvez le voir, une fois qu'on a cliqué sur le niveau 1 du menu horizontal, le sous-menu s'affiche de manière horizontale en dessous, et reste ouvert tant qu'on est sur la page de ce menu (par contre l'effet drop down en liste au passage de la souris ne concerne pas ma demande).
J'ai essayé de faire plein de modifs dans le css, mais je dois être tâche sur un truc, car rien de fonctionne....
Voici le code source du menu concerné:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 <div id="nav"> <div id="nav-left"> <ul class="menu"> <li class="item-435"><a href="/" >Accueil</a></li> <li class="item-469"><a href="/index.php/qui-sommes-nous" >La société</a></li> <li class="item-470 active deeper parent"><a href="#" >Produits neufs</a> <ul> <li class="item-473 current active"><a href="/index.php/equipements-neufs/capteur-plan" >Capteur Plan</a></li> <li class="item-474"><a href="/index.php/equipements-neufs/generateur-rx" >Générateur RX</a></li> <li class="item-475"><a href="/index.php/equipements-neufs/radiologie-numerique" >Salle de radiologie</a></li> </ul> </li> <li class="item-471 deeper parent"><a href="#" >Produits d'occasion</a> <ul> <li class="item-489"><a href="/index.php/equipements-d-occasion/echographes" >Echographie</a></li> <li class="item-490"><a href="/index.php/equipements-d-occasion/radiologie-d-occasion" >Radiologie</a></li> <li class="item-487"><a href="/index.php/equipements-d-occasion/systemes-de-numerisation" >Numérisation radiologie</a></li> </ul> </li> <li class="item-472"><a href="/index.php/contact" >Contacts</a></li> </ul> </div> </div>
Et mon code css:
JE sais que c'est un peu triché, car via Joomla, mais je coince. Quelqu'un pourrait m'aider ??
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 /* Navigation */ #nav {} #navl {} #navr {height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family: 'Cuprum', sans-serif; font-size:15px; margin-top: 5px;margin-top: -4px;margin-left:15px;margin-right:15px;} #nav {z-index:10; position:relative;} #nav-left { float:left; width:80%;} #nav-right { float:right; width:20%;} #nav ul {margin:0; padding:0; float:left;} #nav ul li {list-style:none;float:left;height:100%;position:relative; padding:0; margin:0;} #nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:18px;font-weight:bold;} #nav ul li.active {} #nav ul li.active a {background:#f1f1f1; repeat center; color:#ff6700;} #nav ul li:hover {} #nav ul li a:hover{ text-decoration:none; font-weight:bold; font-size:18px; background:#f1f1f1; repeat center; color:#ff6700;} #nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;} #nav ul li:hover ul, #menu ul li.sfHover ul {left:0;} #nav ul li ul li {padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;} #nav ul li ul li:hover ul {left:180px; top:0} #nav ul li:hover ul li a {text-shadow:none;} #nav ul li:hover ul li { background:none;} #nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#f1f1f1;/*border-bottom:1px solid #3a3a3a*/;color:#555555; font-size:15px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;} #nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0 0 0 10px;height:24px;line-height:24px;background:#f1f1f1;color:#000000; font-weight : bold;font-size:15px;text-shadow:none;}
Partager