28172 sujets

CSS et mise en forme, CSS3

Afficher le sous menu d'un menu déroulant dans le sens horizontal

Bonjour à tous,

Pour réaliser une navigation avec un menu déroulant, j'ai suivi un tutorial trouvé sur pompage.net :
http://www.pompage.net/pompe/deroulants/

J'aimerais maintenant adapter ce menu déroulant à mes envies, en augmenter la taille des liens de premiers niveau et en réduisant la taille des sous menus. Aussi, j'aimerais afficher les sous menus sur une seule ligne horizontale.

J'éprouve malheureusement des difficultés à cibler les éléments. D'où ma question sur ce forum.
Comment puis-je cibler les premiers "li" et ensuite que les seconds "li" correspondant au menu déroulant ?
Comment puis-je afficher les "li" du menu déroulant sur une seule et même ligne?

Voici ma structure html :

<ul id="nav">
<li><a href="#">Squaliformes</a>
	<ul>
		<li><a href="#">Echinorhinidés</a></li>
		<li><a href="#">Oxynotidés</a></li>
		<li><a href="#">Squalidés</a></li>
	</ul>
</li>
</ul>


Et mon css :

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li {
	float: left;
	width: 5em;
	font-size: 1.5em; /* 20/13 */
	font-weight:lighter;
}

#nav li ul {
  position: absolute;
  width: 10em;
  left: -999em;
}

#nav li:hover ul {
  left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
  left: auto;
}

Merci pour vos réponses! Smiley smile
J'ai trouvé le moyen de cibler le menu principal et son sous menu de la manière suivante :


/* premier niveau */
ul#nav {
	 text-shadow: 2px 2px 5px #000000;
	font-size:1.5em;
  margin:30px 0 0 0;
}
/* sous menu */
ul#nav ul li {
	font-size:0.7em;
	padding-top: 5px;
	width:5em;
}


Par contre, je n'arrive toujours pas à faire le nécessaire pour afficher mon sous-menu de manière horizontale !!!
Qqn a une piste svp ???? Smiley sweatdrop

Merci
Bonjour,

Peut-être pourrais-tu essayer une proriété "float:left;" pour ton sous menu où alors "display: inline;"

mais faut tester, là je te donne juste une piste, j'ai pas eu le temps de tester sur ton code et pouvoir te donner réellement une solution qui marche...

J'espére au moins que ça t'aidera un peu
Bonjour,

Le premier niveau de menu vertical et le second en ligne horizontale, c'est bien ça ? Comme sur cette ébauche ?
upload/579-CMCapture3.jpg
Salut,

Pas exactement, mais plutot comme ce sous menu :
upload/10745-sousmenu.gif

Je sais, ce n'est pas ergonomique, mais je dois faire ce sous-menu!!!
Tout aide est la bienvenue.

Merci!!!
Bon ben alors, j'ai "ça" :
<ul id="nav">
   <li><a href="#">Squaliformes</a>
   	<ul>
   		<li><a href="#">Echinorhinidés</a></li>
   		<li><a href="#">Oxynotidés</a></li>
   		<li><a href="#">Squalidés</a></li>
   	</ul>
   </li>
   <li><a href="#">Légumes</a>
   	<ul>
   		<li><a href="#">Patates</a></li>
   		<li><a href="#">Carottes</a></li>
   		<li><a href="#">Tomates</a></li>
   	</ul>
   </li>
</ul>

      #nav {
         position: relative;
      }
      #nav li {
         display: inline;
      }
      #nav li ul {
        display: none;
      }
      #nav li:hover ul {
        display: inline;
        position: absolute;
        top: 1em;
        left: 1em;
      }
      #nav li ul li {
         display: inline;
         position: relative;
      }


J'ai laissé tomber le style des liens pour ne m'occuper que des listes, mais je pense que ça dégraisse le mammouth.
Merci bcp Aureance !!!

Bon, tu as déjà réussi à m'aider. Dans ton exemple, le seul détail qui "manque" par rapport à mon objectif, est d'aligner le début du sous menu directement en dessous du lien parent. Exactement comme l'image que j'ai posté.
A l'heure actuelle, le sous menu débute toujours à droite Smiley decu

Bon je vais déjà essayé d'ajouter mon grain de sel à ton exemple !

Merci.
hey merci pour ton post.
Je n'ai eu le temps de m'y mettre aujourd'hui, mais j'espère lire ton lien dès demain.

Encore Merci. Bonne journée
Je viens de lire le post que tu m'as envoyé et j'ai fais un test en ajoutant un position relative sur le ".nav ul" et un position absolute sur le ".nav ul li ul". Cela ne fait que superposer les menus déroulant Smiley decu

je vois pas quel est le problème. Je mets une image pour illustrer le problème ainsi que le css :
upload/10745-Image2.png 

.nav { 
  position: relative; 
} 
.nav, .nav ul{
	margin:0;
	padding:0;
}
.nav ul {
	position:relative;
}
.nav li { 
  display: inline; 
} 
.nav li ul { 
  display: none;
} 
.nav li:hover ul { 
	display: inline; 
	position: absolute; 
	top: 1em; 
	left: 1em; 
} 
.nav li ul li { 
	display: inline; 
	position: absolute;
	width:auto; 
}


j'espère que l'on pourra m'aiguiler. Car je m'embrouille et je ne trouve vraiment pas la bonne solution !

Merci tout de meme pour le lien !!!!
Salut,
Dans l'exemple de DR I il y avait un peu de float-left quelque part. Faudrait voir… Ça pourrait faire l'objet d'une bonne réponse dans la FAQ si on résoud ce problème.

Je suis OK pour plancher depuis le premier exemple. (pas ce soir, j'ai des invités)
Modifié par Aureance (14 Apr 2010 - 22:12)
je viens te tenter une chose en vain. c'est de faire apparaitre le sous menu lors du clic sur le lien principal. mon but est d'éviter d'afficher les sous menu en hover, mais uniquement après avoir cliqué sur le lien principal.

j'ai donc essayé de modifié mon css :

.nav li:hover ul { /*li:hover ul*/
  display: inline; 
  position: absolute; 
}


en


.nav li a.on ul { /*li:hover ul*/
  display: inline; 
  position: absolute; 
}


Est ce qu'il y a une solution pour faire ce que je souhaite ?

Merci
Mini feed back.
Je n'ai malheureusement pas réussi à réaliser ce menu. J'ai donc opté pour un menu horizontal avec menu vertical horizontal (bien plus ergonomique).

J'espère néanmoins qu'un jour je trouverai la solution qq part sur le net. Même si un menu horizontal avec un menu déroulant également horizontal n'est pas l'idéal, je pense qu'il est toujours intéressant de connaître son fonctionnement pour une éventuelle application.

en tout cas, merci qd même pout tous les coups de main Smiley smile
Il suffit de jouer avec le padding et margin:
paddin-left:0 supprimer l'indentation dû à la puce
et après tu appliques des margin-top (en négatif)et right de la taille de tes <li>
Sujet clos
Aller à