Sujet Précédent Sujet Suivant

Probleme avec menu déroulant

Fermé
etiennosa Messages postés 128 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 2 juin 2013 - 3 nov. 2010 à 18:43
 coeus - 3 nov. 2010 à 21:34
Bonjour,
Je développe un site et j'aimerai avoir un menu horizontal qui se déroule vers le bas quand on clique sur un élément. Le problème est que les éléments qui sont juste en bas du menu horizontal empêchent les sous menus de se dérouler. Les élément du sous menu se retrouvent en bas de de l'élément se trouvant juste en dessous de menu horizontal.
Pardon, que faire? Je test le site localement d'abord avec IE8.
Merci d'avance pour votre aide

Je vous passe le code CSS et XHTML

CSS
/* CSS Document */


*
{
padding: 0px;
margin: 0px;
}



body
{
width: 850px;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background:#F9F9F7 url("a1.gif") repeat-x;
}

#entete
{
position: absolute;
background: url("entete.png") no-repeat;
width: 850px;
height: 200px;

}


#date
{
font-family:arial;
text-align:center;
margin-top:210px;
}

/* ---------------------------ICI C'EST LE MENU HORIZONTAL-------*/
#menuDeroulant {
background : #0033cc; /* couleur bleue */
width : 850px; /* ici c'est la largeur de le bande de menu horizontal*/
height : 21px; /* ici c'est la hauteur de la bande de menu horizontal*/
list-style-type : none;
padding : 0;
border : 0;
}
#menuDeroulant li {
float : left;
width : 170px; /* standard=150 ici c'est la largeur de chaque menu deroulant*/
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited {
display : block;
height : auto;
color : #000000; /*couleur des ecriture du menu horizontal*/
background : #0033cc; /*couleur de l'ensemble menu Prinp etsous menus*/
margin : 0;
padding : 0;
border-right : 1px solid #fff;
text-decoration : none;
}
#menuDeroulant li a:hover {
background-color : #aaaaaa; /*couleur lorsque souris passe sur menu horizontal*/
}
#menuDeroulant li a:active {
background-color : #ffffff;
}
#menuDeroulant .sousMenu {
display : none; /* maniere dont les sous menu seront disposer*/
list-style-type : none;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant .sousMenu li {
float : none;
margin : 0;
padding : 0;
border : 0;
width : 170px; /* la largeur des sous menus*/
border-top : 1px solid transparent; /*stand=1px*/
border-right : 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited {
display : block;
color : #000000; /*couleur des ecritures des sous menus*/
margin : 0;
border : 0;
text-decoration : none;
/*background : transparent url("fondTR.png") repeat;*/
}
#menuDeroulant .sousMenu li a:hover {
background-image : none;
background-color : #aaaaaa; /*couleur lorsque souris passe sur les sous menu*/
}
#menuDeroulant li:hover > .sousMenu {
display : block;
}


/*---------------------------------------MENU VERTICAL----------------------------*/
#menu02 {
float:left;
width: 300px;
height:500px;
border-style:groove;

}

#menu02 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu02 li a:link, #menu02 li a:visited {
color: #4D4D4D;
display: block;
background: url(menu10.gif); /* couleur de chaque element de sous-menus vertical*/
padding: 8px 0 0 10px;
}

/* ce code permettra d'annuler les point pour la liste vertivale*/

.rien
{
list-style-type:none;
}


#menu02 li a:hover {
color: #FF9834;

}



/*----------------------------------A LA UNE---------------------------*/
#actu
{

float:right;
width:142px;
height:200px;
margin-top:40px;
border-style:groove;
}


Le code XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="accueil" href="accueil.css" />


</head>
<body>




<div id="entete">
<!-- Ici on mettra le logo -->
</div>





<div id="date">
<?php
$jour = date('d');
echo 'Aujourd\'hui, nous sommes le : ' . date('d/m/Y');

?>

<!-- -------------------------ici on mettra le menu horizontal--------------------------------------------------->

<div id="menuDeroulant">
<!-- ici on mettra le menu horizontal-->
<ul id="menuDeroulant">
<li> <a href="index.php">Accueil</a></li>
<li> <a href="#">L'association </a>
<ul class="sousMenu">
<li> <a href="#">Histoire</a></li>
<li> <a href="#">Nos objectifs</a></li>
<li> <a href="#">Nos actions</a></li>
<li> <a href="#">Nos valeurs</a></li>
<li> <a href="#">L'équipe</a></li>
<li> <a href="#">Nos moyens</a></li>
</ul>
</li>

<li> <a href="#">Nos actions </a>
<ul class="sousMenu">
<li> <a href="#">Action1</a></li>
<li> <a href="#">Action2</a></li>
<li> <a href="#">Action3</a></li>
<li> <a href="#">Action4</a></li>
</ul>
</li>

<li><a href="#">Partenaires</a>
<ul class="sousMenu">
<li> <a href="#">Part1</a></li>
<li> <a href="#">Part2</a></li>
<li> <a href="#">Part3</a></li>
<li> <a href="#">Part4</a></li>
</ul>
</li>

<li> <a href="#">Bénévoles</a>
<ul class="sousMenu">
<li> <a href="#"> Benevole1</li></a>
<li> <a href="#">Benevole2</li></a>
<li> <a href="#">Benevole3</li></a>
<li> <a href="#">Benevole4</li></a>
</ul>
</li>

</div>



<div id="menu02">
<!-- Ici on mettra le contenu principal de la page -->
<div id="menu02">
<!-- Ici on mettra le menu vertical-->
<ul class="rien">
<li><a href="#">Droit1</a></li>
<li><a href="#">Droit2</a></li>
<li><a href="#">Droit3</a></li>
<li><a href="#">Droit4</a></li>


</ul>
</div>
</div>
<div id="actu">
<!-- Enfin, on mettra l'actualité... -->
</div>

<div id="pied_de_page">
<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
</div>
<!--Fin du outer-->


</body>
</html>


A voir également:

2 réponses

Réponse 1 / 2
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
3 nov. 2010 à 20:07
Si je comprends bien, le problèmes est que ton sous-menu se retrouve "en-dessous" des autres éléments ?

Si c'est ça le problème, ça va être assez simple : il suffit de t'assurer que tous tes éléments de sous-menu ont les attributs suivants : 

position:relative;
z-index:10;

Le position:relative; peut aussi être mis à position:absolute; mais il est à parier qu'un positionnement relatif nuira moins à la disposition de tes éléments. Quant au z-index, c'est l'emplacement "en profondeur" de tes éléments, et est à 0 par défaut. En mettant certains élément à 10 (ou 1, ou 4, ou n'importe quelle valeur au-dessous de 0), ils apparaîtront "par-dessus" les autres. Mais pour fonctionner, il a absolument besoin d'un positionnement soit relatif, soit absolu. Va savoir pourquoi.

Je propose cette solution vu que je vois que tu n'utilises jamais le z-index dans ton code. Ceci dit, peut-être que tu as déjà essayé et que ça ne marche pas, ou peut-être que là n'est pas ta question, si c'est le cas je t'encourage à redemander en d'autres mots, et ça me fera plaisir de t'aider encore !

J'espère tout de même que ça t'aidera !
0
Réponse 2 / 2
coeus
3 nov. 2010 à 21:34
Merci beaucoup. Je le tente et je te fais signe.
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses
Supprimer Liste déroulante
Good -
Good -

2 réponses