Décalage de sous menu

Bonjour pour faire simple voici mon pribléme en image :
menu initial :
http://www.photos-vosges.fr/menuhor1.gif

et le menu au survol pour affichage du sous menu en horizontal.
http://www.photos-vosges.fr/menuhor2.gif

et jaimerai obtenir ça :
http://www.photos-vosges.fr/menuhor3.gif


le probléme est que lorsque j'affiche le sous menu j'ai un super décalage de la taille du sous menu dans le menu principal et je n'arrive pas le corriger.

mon css est le suivant ;

/*/////////////////////////////////////
		    Le menu
/////////////////////////////////////*/
ul#menu {
background: #FFFFFF url(../images/fd-menu.jpg) repeat-x top;
margin:0 10px;
	padding:0 10px;
	list-style-type:none;
	width:760px;
	position:relative;
	display:block;
	height:30px;
	font-size:12px; float:left;
}
ul#menu li {
	display:block;
	float:left;
	text-align:center;
	margin:0;
}
ul#menu li a {
	display:block;
	color: #FFFFFF;
	text-decoration:none;
	height:30px;
	line-height:30px;
	padding:0 10px;
	

}
ul#menu li a:hover {
background: #000000;
color: #FFFFFF;
}

ul#menu .sousMenu {position: relative; z-index: 4;
padding: 0px; display: none; margin: 0px; list-style-type: none;   
}
ul#menu .sousMenu li { background: #FF0000;
padding:0; margin: 0px; text-align:left;
}
ul#menu .sousMenu li a:link {
padding: 0 10px 0 10px; display: block; background: #99CC00; margin: 0px; color: #fff; text-decoration: none;
}
ul#menu .sousMenu li a:visited {
padding: 0 10px 0 10px; display: block; background: #99CC00; margin: 0px; color: #fff; text-decoration: none;
}
ul#menu .sousMenu li a:hover {
background: #FF0000;
}
ul#menu li:hover > .sousMenu {
display: block;
}

.active {
background:url(../images/fd-menuhover.jpg);
color: #CCCCCC;
}

Modifié par fabrice88 (08 Jun 2010 - 14:04)

Bon j'ai cherché pas mal, et au final je pense que sa ne doit pas être faisable uniquement en CSS...
Si quelquun a une idée je prend.

Bonjour,

dur dur de t'aider juste avec une css et une image, tu peux peut être mettre le code du menu ou une page hébergée ?

Bonjour,

voilà la code html du menu.

  <ul id="menu">
    <li><a href="../index.php">Accueil</a></li>
      <li><a href="#">Locations</a>
            <ul class="sousMenu">   
              <li><a href="#" title="titre">titre</a></li>   
              <li><a href="#" title="titre">titre</a></li>  
              <li><a href="#" title="titre">titre</a></li>  
            </ul>
        </li>
      <li><a href="#">Galerie Photos</a></li>
    <li><a href="#">Contact</a></li>
      <li><a href="#">Localisation</a></li>
    <li><a href="#">Partenaires</a></li>
  </ul>

Le problème vient du fait qu'au survol, ton "locations" prend la taille de la totalité des sous menus.

J'avoue que je n'ai pas d'idée immédiate, mais superfish a un menu qui correspond à ce que tu cherches dans > examples > nav-bar style, cela pourrait peut-être t'inspirer