Modifier code css d'un menu

Version imprimable

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....:oops:

Voici le code source du menu concerné:

Code:

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:

Code:

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;}

JE sais que c'est un peu triché, car via Joomla, mais je coince. Quelqu'un pourrait m'aider ??

Bonjour,

Code:

1
2
3
4
#nav ul li ul { position:absolute; width:540px; /* = (3 x 180px) pour 3 sous-menus */ 
...................... }
#nav ul li ul {float:left; 
...................... }

On peut aussi les positionner par rapport au ul (et pas au li) parent :

Code:

1
2
3
4
5
6
7
8
9
#nav ul {position:relative;
...................... }
#nav ul li {/*SUPPRIMER position:relative;*/
...................... }
 
#nav ul li ul {position:absolute; width:100%; /* 100% du parent*/  
...................... }
#nav ul li ul {float:left; 
...................... }

04/11/2013, 11h38
Ebiomedic

Ouahou,

C'est exactement ce que je souhaitais faire !
Merci infiniment ! ça avait l'air si simple... :mrgreen:

C'est l'option en choisissant le positionnement par rapport au ul que je voulais en plus.

Trop contente, MERCI :ccool:

1 pièce(s) jointe(s)

Bon finalement il y a encore un petit hic :oops:
Voici mon code concernant ce menu, modifié avec ton aide:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 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:100%;}
#nav-right { float:right; width:0%;}
#nav ul {margin:0; padding:0; float:left; position:relative;}
#nav ul li {list-style:none;float:left;height:100%;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; color:#ff6700;}
#nav ul li ul {position:absolute; width:100%;left:-999em;border-top:0; margin:0; padding:0; float:left;}
#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#nav ul li ul li {padding:0;height:auto;width:200px; margin:0 auto; border:none; text-align: center;}
#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:35px;line-height:35px; background:#f1f1f1;/*border-bottom:1px solid #3a3a3a*/;color:#555555; font-size:15px;font-weight:bold;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: center; padding:0 0 0 10px;height:35px;line-height:35px;background:#f1f1f1;color:#000000; font-weight : bold;font-size:15px;text-shadow:none;}
#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}

Le sous-menu s'ouvre impecc, sous forme d'un "bandeau" avec une couleur en background, aligné à gauche, sur le "bandeau" du menu principal, il s'ouvre en horizontal parfaitement, mais par contre, il ne va pas jusqu'au bout à droite du bandeau du menu principal....

J'ai mis une photo en pièce jointe pour bien illustrer....J'ai essayé des trucs depuis ce matin mais je dois être très quiche aujourd'hui, je n'y arrive pas...

Une inspiration ?

04/11/2013, 19h08
Invité

Il faut aussi mettre le background sur le ul :

Code:

#nav ul li ul {............. background:#f1f1f1;}
05/11/2013, 11h58
Ebiomedic

Rah j'avais pas pensé à ça...
Merci . :oops: