28172 sujets

CSS et mise en forme, CSS3

Problème de z-index dans un menu déroulant

Bonjour tout le monde,

Je dis z-index mais je ne suis pas du tout certain que ça vienne de là mais en tout cas ça explique un peu mon problème.

Je veux faire un menu un peu particulier, les éléments de menu sont sur deux colonnes et au survol les éléments du sous-menu correspondant se déroulent vers le bas. Tout ça marche parfaitement bien sauf que les sous-menus s'affichent sous les éléments de menu et non par-dessus malgré que j'aie essayé plusieurs variantes de z-index...

Si quelqu'un a une idée pour me permettre d'arriver au résultat correct ce serait sympa.

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu {
	width: 630px;
	margin: 16px 0 0 18px;
	padding: 0;
	list-style-type: none;
}

#menu li {
	float: left;
	margin: 18px 0 0 18px;
	width: 270px;
	height: 60px;
	font-family: Rockwell;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	background-color: #4bafe1;
	text-transform: uppercase;
	text-align: center;
	line-height: 60px;
	padding: 0;
}

#menu li a {
	display: block;
	color: #ffffff;
	text-decoration: none;
}

#menu li a:link, #menu li a:visited {
	display: block;
	color: #ffffff;
}

#menu li a:hover, #menu li a:active  {
	display: block;
	background-color: #406dae;
	color: #ffffff;
}

#menu .sousmenu {
    z-index: 10;
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu .sousmenu li {
    background-color: #406dae;
    z-index: 10;
    float: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 270px;
    height: 30px;
    line-height: 28px;
}

#menu .sousmenu li a {
    margin: 0;
    padding: 0;
}

div.sousmenu li a:hover {
    cursor:pointer;
}

#menu li:hover > .sousmenu { display: block; }

</style>
</head>

<body style="width: 630px;">
                <ul id="menu">
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                  <li><a href="">Menu</a>
                    <ul class="sousmenu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </li>
                </ul>
</body>
</html>

Modifié par 6l20 (20 Feb 2012 - 17:16)
bonjour

(balise le code, c'est mieux)

Dans ton CSS je ne vois pas l'usage du positionnement ? relatif/absolu ?

GC
Merci de me répondre.

Que veux-tu dire par baliser mon code ? Il est normalement indenté mais c'est pas passé avec le copier coller que j'ai fait.

Sinon pour le positionnement j'ai juste mis des float: left; là où ça me semble nécessaire et rien de plus.

Sinon j'essaye depuis le début de joindre une image mais j'ai ce message :
Erreur
Information incomplète
Vous devez être identifié

Or je le suis puisque j'écris... No comprendo...
re,

baliser son code avec le bbcode du forum [ code] ... [ /code]

position et float , ce n'est pas la même chose. D'ailleurs z-index ne s'applique que si l’élément est positionné en relatif ou absolu par exemple.

Cordialement,
GC
ha ok j'avais vu ça mais indiqué comme étant de la coloration (colorisation ?... ) syntaxique...

Sinon tu as raison j'ai oublié une bête ligne position: relative; dans #menu .sousmenu li ce qui fait tout le boulot et rend le z-index superflu.

Merci
J'aimerais bien rajouter le tag résolu mais je n'ai nulle part de bouton éditer, donc impossible. Un rapport avec l’impossibilité de joindre une image ? Il semblerait que je sois identifié à moitié seulement...
Sujet clos
Aller à