Menu horizontal avec sous menu horizontal

Bonjour,

J'ai un menu horizontal avec un sous menu vertical et je souhaiterai l'adapter pour que les sous menus soit horizontal...je n'y arrive pas. Pouvez-vous m'indiquer ce qu'il faut modifier. Merci d'avance.Voici mon code css

#menu_horizontal {
	margin: 0;
	padding: 0;
	list-style-type:none;
	list-style-position:outside;	
	height:1.9em;
	position:relative;
	z-index:2000;
}

#menu_horizontal li {
	float:left;
	position:relative;

}

#menu_horizontal a {
	display:block;
	padding: 0.3em 12px 0.35em 12px;
	text-decoration:none;
}

#menu_horizontal ul {
	margin: 0;
	padding: 0;	
	list-style-type:none;
	list-style-position:outside;	
	position:absolute;
	display:none;
	width:12em;

}

#menu_horizontal li ul a {
	width:12em;
	height:auto;
	float:left;
	display:inline;
}

#menu_horizontal ul ul {
	top:auto;
}	

#menu_horizontal li ul ul {
	left:12em;
	margin:0px 0 0 10px;
		
}

#menu_horizontal li:hover ul ul, #menu_horizontal li:hover ul ul ul, #menu_horizontal li:hover ul ul ul ul {
	display:none;
	
} 
#menu_horizontal li:hover ul, #menu_horizontal li li:hover ul, #menu_horizontal li li li:hover ul, #menu_horizontal li li li li:hover ul {
	display:block;
} 

Bonjour,

Essaye de rajouter

#menu_horizontal li ul li {
	float:left;
		
}

merci pour ta réponse. J'avais déjà essayé mais sans succès. J'ai retenté par acquis de conscience et cela ne marche toujours pas.

est- ce quelqu'un à une autre idée.

Bonjour,

Le très difficile exercice des menus multi niveaux
La quête du Graal....

Une page en ligne n'aurait pas été inutile (code html, css pouvant interagir, javascript (...) ? )
Techniquement, tu dois masquer la liste non ordonnée de deuxième niveau, éventuellement définir une largeur (pour certain récalcitrant navigateur ça peut aider), et la positionner de façon absolue par rapport à son conteneur, les listes item et les liens qu'elle contient devraient eux bénéficier d'un mode de rendu en ligne (display:inline), par exemple.

Ce type de menu (a priori géré uniquement par css) pose plus de problème qu'il n'apporte de solution; de compatibilité, d'utilisabilité, d'ergonomie, etc...
C'est un vrai "casse gueule"

Je continue de penser (même si je reste ouvert d'esprit ) que ce type d'interaction doit être laissé de côté si son usage n'est absolument pas indispensable et à défaut être laissé à la discrétion de JavaScript en ce qui concerne sa gestion (ce qui permet de limiter les inévitables problèmes que cela génère)

Ton moteur de recherche devrait te permettre de trouver quelques bons exemples sur la toile, ici par exemple (onglet exemple -> navbar_style).

Bon courage.
Modifié par 6l20 (12 Sep 2012 - 21:05)

Merci pour la réponse. J'ai bien compris le principe "anti-ergonomique" mais la personne a qui j'essaye de faire cela y tiens.... malgré une démonstration d'anti-ergonomie.

Bon j'ai compris le principe d'application mais j'avoue ne pas arriver à le faire quand même.

Mon site est sous SPIP mais en local pas d'adresse en ligne (je suppose que certains connaissent!!). Je mets si cela peut aider les codes associés :

Par contre j'ai vu un site qui utilise le même menu horizontal mais que je voudrias voir déplié horizontalement : http://navarre-lettres.spip.ac-rouen.fr/

html :

#CACHE{6*3600}


[(#REM) Menu : déroule le niveau (fil d'ariane)]
<script type="text/javascript" src="#EVAL{_DIR_PLUGIN_EVABONUS}javascript/menu_depliable_horizontal.js"></script>

<ul id="menu_horizontal">
<li><a href="[(#URL_SITE_SPIP|parametre_url{'lang',#LANG})]"><:accueil:></a></li>
<BOUCLE_racine(RUBRIQUES){racine}{par titre}{lang}{doublons}>
<li class="[(#EXPOSE)]">
		<a href="#URL_RUBRIQUE" [class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]</a>
		<B_ss_rubrique>
		<ul>
	        <BOUCLE_ss_rubrique(RUBRIQUES){id_parent}{par num titre}{lang}{doublons}>
		<li class="[(#EXPOSE)]">
			<a href="#URL_RUBRIQUE" [class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]</a>
			
	        <BOUCLE_n(boucle_ss_rubrique)></BOUCLE_n>
			
		</li>
	        </BOUCLE_ss_rubrique>         	
		</ul>
		</B_ss_rubrique>
	</li>
</BOUCLE_racine>  
</ul>
<div class="nettoyeur"></div>

le code JavaScript .. et là j'avoue que je n'y comprend rien!!!

$(document).ready(function(){
$(" #menu_horizontal ul ").css({display: "none"}); // Opera Fix
$(" #menu_horizontal li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
});

pour mémoire le code css

#menu_horizontal {
	margin: 0;
	padding: 0;
	list-style-type:none;
	list-style-position:outside;	
	height:1.9em;
	position:relative;
	z-index:2000;
}

#menu_horizontal li {
	float:left;
	position:relative;

}

#menu_horizontal a {
	display:block;
	padding: 0.3em 12px 0.35em 12px;
	text-decoration:none;
}

#menu_horizontal ul {
	margin: 0;
	padding: 0;	
	list-style-type:none;
	list-style-position:outside;	
	position:absolute;
	display:none;
	width:12em;

}

#menu_horizontal li ul a {
	width:12em;
	height:auto;
	float:left;
	display:inline;
}

#menu_horizontal ul ul {
	top:auto;
}	

#menu_horizontal li ul ul {
	left:12em;
	margin:0px 0 0 10px;
		
}

#menu_horizontal li:hover ul ul, #menu_horizontal li:hover ul ul ul, #menu_horizontal li:hover ul ul ul ul {
	display:none;
	
} 
#menu_horizontal li:hover ul, #menu_horizontal li li:hover ul, #menu_horizontal li li li:hover ul, #menu_horizontal li li li li:hover ul {
	display:block;
} 

Bon j'y suis arrivé en bricolant...mais alors vraiment en bricolant.

Je suis parti d'un code css fonctionnant et j'ai modifié petit à petit le mien (par essais/erreur).

Par contre si jamais il y a 3 niveaux de menus alors je suis incapable d'aller cliquer sur le 3 niveaux.

Je m'explique :
Si mon choix de niveau 1 se fait sur le 3ème bouton, il déroule 4 sous choix si le miens est le premier sous bouton je dois descendre verticalement puis longer le sous menu jusqu'au premier sous bouton....déjà là...faut être habile de la souris (Je rejoins donc l'avis de 6l20 sur l'ergonomie)
Mais alors si une fois arrivé sur le premier bouton du sous menu, celui-ci déroule un troisième sous-menus avec plusieurs choix, je ne peux pas y aller car le naviguateur souhaite que je descende à la verticale du tout premier bouton de niveau 1...donc impossible.

A moins que je n'ai raté quelque chose!!!
Si quelqu'un à une idée, je suis preneur...

Bonsoir,

Plugin pour Spip du plugin jQuery Superfish de Joel Birch ?
Je ne suis pas certain qu'en rajoutant un troisième niveau de menu, tu obtiennes ce que tu veux (avec superfish navbar, le 3ème niveau se déploie verticalement...je n'ose pas imaginer s'il devait se dérouler horizontalement ceci dit... )
Anyway, je suis sûr que c'est une vraie connerie

Il existe d'autres plugin, plus "conventionnels" dans leurs présentations, pour gérer les menus déroulants sous SPIP : Menu déroulant sous spip
Peut-être trouveras-tu meilleur aide sur le forum de Spip ?
Bon courage.