28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Problème : menu déroulant sous des div

Bonjour,

je me suis mis au css depuis peu et je traine depuis quelques jours sur ce forum pleins d'informations très pratiques.
Mais je n'ai pas trouvé de solution au problème à mon problème.

J'ai essayé de mettre en application le tutoriel suivant pour faire un menu déroulant :
http://marcarea.com/tuto/menu01.php

Et je me retrouve avec un problème un peu similaire à ce à que j'ai pu voir dans ces post sauf que moi c'est pas du flash :

http://forum.alsacreations.com/topic-1-10542-1-Menu-droulant-au-dessus-de-flash.html

http://forum.alsacreations.com/topic.php?fid=1&tid=32688&s=menu+d%E9roulant+z-index

http://forum.alsacreations.com/topic.php?fid=4&tid=32581&s=menu+d%E9roulant+z-index


C'est à dire que mon sous-menu passe sous les div de ma page principale. J'ai essayé de mettre des z-index un peu partout mais rien n'y fait.
Sous IE, le sous menu fonctionne un peu si les div sont vides mais avec FF le sous menu est clairement sous les div, impossible de le passer au dessus.


Voici mon code :
le fichier html 

<!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" lang="fr">

<head>

	<link href="fse.css" rel="stylesheet" type="text/css" media="screen" />
	<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
	<!-- Bananalbum -->

</head>

<body topmargin="0" marginheight="0">

<div id="cadre_menu">
	<div id="menu_left"></div>

	<ul id="menu">
		<li><a href="#">Book</a></li>

		<li><a href="#">Menu1</a></li>
		<li><a href="#">Menu2</a></li>
		<li><a href="#">KMenu1ite</a></li>		 
		<li><a href="#">Divers</a></li>		 
		<li><a href="#">Dropdown</a>

				<ul class="sousMenu">
					<li><a href="#">Liens</a></li>
					<li><a href="#">Commande</a></li>
					<li><a href="#">Contacts</a></li>
					<li><a href="#">A propos</a></li>
				</ul>		 	
		</li>
		<li><a href="#">A propos</a></li>
	</ul>
	<div id="menu_right"></div>
</div>
<!-- Contenu -->
<div id="cadre_centre">
  <!-- Partie centre -->
  <div id="cadre_lien">
  
      <h1>Météo</h1>
      <p>
      	<a href="https://www.windguru.cz" target="_blank">https://www.windguru.cz</a><br/>

      	Le top pour les prévisions météo à 8 jours, vent, houle, T°…
      <br/><br/>
      	<a href="http://meteoreunion.europeanservers.net/webcam/metar_fmep.php" target="_blank">http://meteoreunion.europeanservers.net/webcam/metar_fmep.php</a><br/>
      	Relevés du vent à St-Pierre toutes les heures.
      <br/><br/>
      	<a href="http://perso.wanadoo.fr/loic.abadie/vol.html" target="_blank">http://perso.wanadoo.fr/loic.abadie/vol.html</a><br/>
      	Les tops prévisions de vent sur la Réunion par le parapentiste Loïc Abadie.
      <br/><br/>
      	<a href="http://www.meteo.fr/temps/domtom/La_Reunion/Cmr/SaisonCourante/bulletins_Previ/bulletinGP.html" target="_blank">http://www.meteo.fr/temps/domtom/La_Reunion/Cmr/SaisonCourante/bulletins_Previ/bulletinGP.html</a><br/>

      	Bulletin de Météo France (quand ils ne sont pas en grève…).
      <br/><br/>
      	<a href="http://www.parapente-reunion.fr/webcam.php" target="_blank">http://www.parapente-reunion.fr/webcam.php</a><br/>
      	Webcam spot de la Tortue à St-Leu.
      <br/><br/>
      	<a href="http://french.wunderground.com/global/stations/61984.html" target="_blank">http://french.wunderground.com/global/stations/61984.html</a><br/>
      	Prévisions météo pour St-Pierre.
      </P>
	  
   
  </div>
  </div>
  <div id="espace">&nbsp;</div>
</div>

</body>
</html>

le css de la page : 

/* --------------- Styles du corp et des liens de la page --------------- */
body {
	background-color: #000000;
	margin-top: 0px;
	margin-bottom: 0px;	
	margin-left: auto;
	margin-right: auto;
	width: 770px;
	text-align: center;
}
a:link,
a:visited {   
	text-decoration: none;
	color: #999;
}
a:hover {
	font-weight: normal;
	text-decoration: none;
	color: #06c;
}
#texte {
	font: normal 10pt verdana, sans-serif;
	text-align: justify;
	color: #B1CCB1 ; 
	/*color: #999;*/
}
img {
	border: 0;
}
#espace {
	height: 0px;
	clear: both;
}
#cadre_centre {
	border : 1px solid #808080 ;
	width: 770px;
	min-height: 289px;
	float: left;
	z-index: 1;
}
#cadre_lien{
	z-index: 1;
}

#cadre_lien h1{
	font-size: x-large ;		
	color: #B1CCB1 ;  /* gris */
	text-align:left;
	padding : 10px ; 
	marging:10px;	
	z-index: 1;
}

#cadre_lien p{
	background-color : #111111 ; 
	font-size: medium ;	
	color: #B1CCB1 ; 
	text-align:left;
	padding : 5px ; 
	padding-bottom:10px;
	marging:5px;
	border-top: 2px solid #222222;
	border-bottom: 2px solid #222222;
	z-index: 1;
}
#cadre_lien a,
#cadre_lien a:link,
#cadre_lien a:visited,
#cadre_lien a:hover
{
	color: #3366FF !important; 
}

le css de mon menu : 
#cadre_menu {
	width: 800px; 
	height: 30px;
	margin: 10px 0px 20px 0px; 
	padding-left : 20px ; 
	border: 0;
	float: left;
	z-index: 100;
}
#menu_left{
	width: 20px; 
	height: 30px;	
	position:absolue; 
	top:10px ; 
	margin:0; 
	padding: 0; 
	border: 0;
	float: left;
	background:url("images/menu_left.gif") no-repeat ; 
	z-index: 100;
}
#menu_right{
	width: 20px; 
	height: 30px;
	margin: 0; 
	padding: 0;
	border: 0;
	float: left;
	background:url("images/menu_right.gif") no-repeat ;
	z-index: 100;
}
/*---- Div Menu ----- */
#menu
{
	width: 702px; 
	height: 30px;
	margin: 0;	
	padding: 0; 
	border: 0 ;
	float: left;
	list-style-type: none;
	vertical-align: middle ;
	z-index: 50;
}

#menu li
{
	width: 100px; 
	height: 30px;
	margin: 0; 
	padding: 0; 
	border: 0;
	float: left;
}
#menu li a:link, 
#menu li a:visited
{
	display: block;
	color:#616161;
	background:url("images/menu_bg.gif") repeat ;
	width: 100px; 
	height: 25px;
	margin: 0;
	padding:0 ;
	padding-top:5px;
	border: 0 ; 
	border-right: 1px solid #d7d7d7;
	border-left: 1px solid #d7d7d7;
	text-decoration: none;
	z-index: 100;
}

#menu li a:hover,
#menu li a:active { 
	color:#FFFFFF;	
	background:url("images/menu_bg_over.gif") repeat right top; 
}

/*---- Div Sous Menu ----- */
#menu .sousMenu
{
	width: 150px;
	display: bloc;
	list-style-type: none;
	margin: 0; 
	padding: 0; 
	border: 0;
	z-index:90;
}
#menu .sousMenu li
{
	width: 150px;	
	height: 30px;
	float: none;
	margin: 0; 
	padding: 0; 
	border: 0;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
	z-index:90;
}
#menu .sousMenu li a:link, 
#menu .sousMenu li a:visited
{
	display: block;
	width: 150px; 
	height: 25px;
	color: #616161;
	margin: 0; 
	padding: 0; 
	padding-top:5px;
	border: 0;
	background-color: #9D9D9D;
	text-decoration: none;
}
#menu .sousMenu li a:hover, 
#menu .sousMenu li a:active 
{
	width: 150px; 
	height: 25px;
	color: #FFFFFF;
	background-color: #555555;
}

#menu li:hover > .sousMenu { display: block; z-index: 100;}


Si quelqu'un à un idée franchement, je serais trop content Smiley biggrin
merci d'avance.
Modifié par al.ex (22 Feb 2008 - 16:43)
bon, ben je me suis résolu tout tout seul en fait.
j'ai mis ma classe sousMenu en position absolue et j'ai viré le float:left.
Et ça fonctionne bien.
Par contre, je ne comprends pas trop pourquoi cela ne fonctionnait pas.
Sujet clos
Aller à