28172 sujets

CSS et mise en forme, CSS3

Menu déroulant

Bonjour à tous,
Je souhaite faire un menu déroulant lorsque je passe ma souris sur un élément du menus les sous éléments apparaissent.
Voici ce que j'ai entrepris:

<ul id="navigation">
   <li><a href="#" class="selected">ACCUEIL</a></li>
   <li><a href="#">RADIO</a>
        <ul class="sous-navigation">
		<li>Podcasts</li>
		<li>Emissions</li>
        </ul>	
   </li>




ul#navigation li {float:left;}
ul#navigation li a {
		display:block;
		height:40px;
		font-size:14px;
		color:#000000;
		font-weight:bold;
		text-decoration:none;
		line-height:40px;
		padding-left:22px;
		padding-right:22px;
}
ul#navigation li a {
 background-image : url(img/menu-background.jpg);
 background-repeat : repeat-x;
 background-size : 4px;
 border : 1px solid white;
 border-left:0px;
}
ul#navigation li:first-child {border-left:1px solid #FFF;}
ul#navigation li a:hover, ul#navigation li a.selected { 
	background:url(img/menu-background.jpg) bottom repeat-x; 
	background-size:2px; 
	color:white;}


 #navigation .sous-navigation
{
	margin: 0;
	 padding: 0;
	 border: 0;
	display: none;
	list-style-type: none;
}
#navigation .sous-navigation li
{
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	height:40px;
	position : absolute;
}

#navigation li:hover > .sous-navigation { display: block; }


les sous éléments sont bien cachés, et lorsque je passe ma souris ils apparaissent. Mais ils s'affichent les uns sur les autres. Je ne comprends pas pourquoi ... Quelqu'un peut m'aider ?
Merci
J'ai ajouté : 
position : relative;
à mon élément li parent. Mais maintenant les sous éléments ne s'affichent plus au passage de ma souris.
mini-truc a écrit :
J'ai ajouté : 
position : relative;
à mon élément li parent. Mais maintenant les sous éléments ne s'affichent plus au passage de ma souris.

À présent, ajuste le positionnement de ton sous-menu (les propriétés top, right, bottom et left sont là pour ça Smiley cligne ).
Comme le dit ce tutoriel :
a écrit :
Il est capital de noter qu'un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés top, bottom, left ou right n'a pas été précisée ; il s'agit d'ailleurs là d'un comportement appliquable à toutes les positions.

Pour prendre un exemple plus parlant, si je déclare la règle CSS suivante :
mon sélecteur {
  position: absolute;
  top: 10px;
  left: 20px;
}

l'élément ciblé par le sélecteur se positionnera en absolu, à 10 pixels vers le bas de l'extrémité supérieure du plus proche parent positionné et à 20 pixels vers la droite de l'extrémité gauche de ce même plus proche parent positionné.

Est-ce plus clair ? À toi de jouer, maintenant. Smiley smile
Ok merci c'est plus clair seulement je dois avoir un problème de z-index, il passe derrière le contenu du dessous. Bon j'y travaille encore merci !
Bonjour,

Dans ton code de départ tu positionnes tous les LI de ton sous-menu en absolu, sans indiquer de coordonnées. Partant de là, il est normal qu'ils se retrouvent les uns par dessus les autres (réviser le positionnement absolu si ça n'est pas clair).

C'est plutôt ton élément UL de deuxième niveau qui devrait être positionné en absolu. Les LI devraient plutôt rester en position:static (valeur par défaut, pas besoin de le déclarer).
Sujet clos
Aller à