[Résolu] Sous menu déroulant qui s'affiche deriere mon template

Bonsoir,

j'ai un léger menu déroulant visible à cette adresse : sicilia-antica.com

et dans la liste déroulante de "la carte" j'ai qu'un objet de la liste au lieu de 3 les deux autres passent derrière mon template (ou toutes les div sont en position absolute)

Comment faire pour tout afficher ?

Voici le code je vais essayer de mettre que l'essentiel

Le menu :

<ul id="navi">
	<li id="navi-accueil"><a name="main" href="/">Accueil</a></li>
   <li><a name="main" href="#">La Carte</a>
		<ul>
			<li><a href="">Pizza</a></li>
			<li><a href="">Plats</a></li>
			<li><a href="">Menu</a></li>
		</ul>
	</li>
   <li><a name="main" href="#">&eacute;v&eacute;nements</a>	</li>
   <li><a name="main" href="#">Sicilia Antica</a></li>
   <li><a name="main" href="#">Contact</a></li>
</ul>

partie du code de mon template (ici les deux catégorie juste en dessous de mon menu)

#photo-droite_ {
	background-image: url("../images/photo_droite.png");
	position:absolute;
	left:341px;
	top:98px;
	width:581px;
	height:278px;
}

#colonne-droite_ {
	background-image: url("../images/colonne_droite.png");
	position:absolute;
	left:922px;
	top:98px;
	width:102px;
	height:803px;
}

Mon css du menu fesant 93 lignes et ne voulant pas trop surcharger le post pour pas vous décourager de la lecture de mes chers sauveur je ne le mettrait que si vous le demander.

merci d'avance de votre aide
Modifié par Hooli (06 Mar 2012 - 20:50)

Salut,

Pour les éléments positionnés, ce qui est ton cas visiblement, tu peux utiliser la propriété z-index pour ton menu de navigation... L'axe z est la profondeur, 1 rendra l'élément navi au-dessus des éléments n'ayant aucun z-index d'utilisé (valeur de base 0).

#nav {
position: absolute;
z-index: 1;
...
...
}

Modifié par kinkaz (07 Mar 2012 - 10:38)

Hello,

Kinkaz a raison pour le z-index, par contre pas besoin de la position absolute, tu peux laisser la position relative qui est déjà sur ton #nav .

Merci c'est corrigé et c'est bon impeccable

Double post pour marquer le sujet comme résolu

Bonjour, je me permets de répondre à la suite de ce sujet car je pense que peut être mon problème est du même acabit.

Je suis assez Novice dans le milieu CSS et HTML mais cela me passionne.
J'ai souhaité un menu déroulant sur mon blog et j'en ai fait un sous CSS3Menu.

Je souhaite le positionner dans la colonne de gauche, mais lorsque je le fait tout ce qui se déroule hors marge apparait sous la colonne centrale.

Certainement que la solution est dans la définition de la profondeur de mon menu mais voilà, je ne sais pas trop quoi modifier.
Je vous met mon code CSS si cela peut être utile.

Merci de m'avoir lu.

ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;}
ul#css3menu1,ul#css3menu1 .submenu{
background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 .submenu{
visibility:hidden;position:absolute;left:0;top:400%;opacity:0;-moz-transition:all 0.5s;-webkit-transition:opacity 0.5s,top 0.5s,left 0.5s;-o-transition:opacity 0.5s,top 0.5s,left 0.5s;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;float:left;background-color:#f8ede6;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>.submenu{
visibility:visible;opacity:1;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul .submenu{
position:absolute;left:200%;top:0;}
ul#css3menu1>li:hover>.submenu{
top:100%;}
ul#css3menu1 ul li:hover>.submenu{
left:100%;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
*display:inline;}
ul#css3menu1 .column{
float:left;}
ul#css3menu1>li{
margin:0;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Georgia;color:#dba29c;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#f8ede6;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#f8ede6;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Georgia;color:#dba29c;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#e8beb0;border-color:#C0C0C0;border-style:solid;color:#fcfff9;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 li a.pressed img.over{
display:inline;}
ul#css3menu1 li a.pressed img.def{
display:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:28px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#e8beb0;background-image:none;color:#fcfff9;text-decoration:none;}
ul#css3menu1 li.toplast>a{
border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}

Bon en modifiant la position relative en absolute ca marche mait le menu est centré horizontalement sur le blog et je ne parviens pas à trouver comment le mettre tout a fait à gauche ?
Si quelqu'un pouvait m'aider je lui en serais reconnaissante =)
Merci