Soucis superposition div

Bonjour à tous,

Je me heurte à un petit problème depuis hier soir ...

Donc voici mon problème :

<div id="head">
	<div id="logo">
		<div id="nav">
			<ul>
				<li><a href="<?php bloginfo('url');?>">ACTUALIT&#201;S</a></li>
				<li><a href="#">L'&#201;QUIPE</a></li>
				<li><a href="#">R&#201;SULTATS</a></li>
				<li><a href="#">PHOTOS</a></li>
			</ul>
		</div>
	</div>

</div>

#head #logo{
	position:relative;
	margin-top:150px;
	background:url('images/logo.png') no-repeat;
	height:233px;
	width:369px;
}

#head #logo #nav {

	width:676px;
	background:#918D8E;	
	font-family:Stafford-Serial-Regular;
	font-size:20px;
	border-width:6px;
	border-left-width:0px;
	border-right-width:0px;
	border-color: #231F20;
        border-style: solid;
	height:92px;
	position: absolute;
	top:70px;
	left:280px;
}

Donc, pour jouer sur la superposition des div, il faut jouer avec l'attribut z-index, hors quand j'applique un z-index:-1 sur la barre de navigation pour que mon image soit au devant mon menu perd toute la fonctionnalité de lien et de hover ... En gros, je ne peux plus cliquer sur les éléments de mon menu ...

Et bien sûr sans z-index, mon logo est derrière le menu et je peux cliquer sur les éléments ...

J'ai donc dans un premier temps analysé avec l'inspection la taille des éléments et j'ai pu voir que le logo prenait la largeur de la page, je l'ai donc limité à sa taille, chose faite et confirmer par l’inspection de l'élément

Une idée ?

Bonjour leonheart,

Avant de parler du coeur de ton problème déjà je vois une erreur css.

Lorsque tu cibles des ID, tu n'as pas besoin de cibler les id parents.ex:

Au lieu de faire

#head #logo #nav {

	/*... ton code*/
}

il faut faire

#nav {

	/*... ton code*/
}

Ensuite pour ton problème de superposition, le résultat que tu obtiens est logique puisque l'image de ton logo est en fait le background de l'élément parent de barre de navigation... il faudrait dissocier l'image de ton logo et ta barre nav et ainsi tu pourras jouer plus facilement sur leur positions respective.

Dissocier dans le sens suivant ?

<div id="head">
	<div id="logo">	</div>
        <div id="nav">
		<ul>
			<li><a href="<?php bloginfo('url');?>">ACTUALIT&#201;S</a></li>
			<li><a href="#">L'&#201;QUIPE</a></li>
			<li><a href="#">R&#201;SULTATS</a></li>
			<li><a href="#">PHOTOS</a></li>
		</ul>
	</div>
</div>

Si c'est le cas, je perds la notion de position par rapport au logo vu que ce sont deux éléments distinct non ?

oui exactement

salut,
le gros problème c'est surtout que tu utilises un logo en background alors que sémantiquement c'est une image donc la code qui correspondrait le mieux serait une balise <img>.
Je ne vois pas après pourquoi tu passes par des positions absolues ?