Problème de menu déroulant horizontal

Bonjour,

je me suis basée sur votre tutoriel pour faire mon menu déroulant mais j'ai quelques soucis.

voila mon menu est construi à base d'images. Lorsque que je passe sur une de mes images présentes dans mon menu, les sous rubriques apparraisent mais pas comme je le souhaiterais.
Voilà entre l'image et mon sous menu j'ai un espace ce qui m'embete car je voudrais le coller à l'image.. De plus j'ai mis le mouseout mais lorsque je le met il est impossible d'aller sur les sous rubriques. le menu se replie de suite. je pense que c'est du au fait qu'il y a un espace entre l'image et le sous menu.
Enfin lorsque la souris passe sur les osu rubrique la barre grise que je souhaite mettre sur le lien hover ne prend pas toute la largeur du block mais seulement la largeur du texte.

voici mon code:

CSS:

dl, dt, dd, ul, li{
margin:0;
padding:0;
list-style-type:none;
}
#menu_deroulant{
height:38px;
position:relative;
top:0;
left:0;
width:100%;
z-index:100;
}

#menu_deroulant dl{
float:left;
margin:0;
}

#menu_deroulant dt{
cursor:pointer;
}

#menu_deroulant dd{
margin-left:11px;
display: none;

}
#menu_deroulant li{
text-align:center;
background:#6699CC;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
font-family:Verdana;
font-size:11px;
}

#menu_deroulant li a, #menu_deroulant dt a{
color:#FFFFFF;
text-decoration:none;
display:block;
height:100%;
width:100%;
border: 0 none;
}

#menu_deroulant li a:hover, #menu_deroulant li a:focus, #menu_deroulant dt a:hover, #menu_deroulant dt a:focus{
background:#b3c0cd;
}

HTML:

<div id="menu_deroulant">
		<dl>
			<dt onmouseover="javascript:montre('smenu1');"><a onmouseover="javascript:montre('smenu1');"
href="#"><img src="images/vie_muni.gif" border="0"/></a></dt>
				<dd id="smenu1">
					<ul>
						<li><a href="#">sous-menu 1.1</a></li>
						<li><a href="#">sous-menu 1.2</a></li>
						<li><a href="#">sous-menu 1.3</a></li>
						<li><a href="#">sous-menu 1.4</a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"><a onmouseover="javascript:montre('smenu2');"
href="#"><img src="images/vie_eco.gif" border="0" /></a></dt>
				<dd id="smenu2">
					<ul>
						<li><a href="#">sous-menu 1.1</a></li>
						<li><a href="#">sous-menu 1.2</a></li>
						<li><a href="#">sous-menu 1.3</a></li>
						<li><a href="#">sous-menu 1.4</a></li>
					</ul>
				</dd>
		</dl>
			
			
			
		<dl>
			<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');" ><a onmouseover="javascript:montre('smenu3');"
href="#"><img src="images/grandir.gif" border="0" /></a></dt>
				<dd id="smenu3">
					<ul>
						<li><a href="#">sous-menu 1.1</a></li>
						<li><a href="#">sous-menu 1.2</a></li>
						<li><a href="#">sous-menu 1.3</a></li>
						<li><a href="#">sous-menu 1.4</a></li>
					</ul>
				</dd>
		</dl>
			
				
		<dl>
			<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"><a onmouseover="javascript:montre('smenu4');"
href="#"><img src="images/vivre.gif" border="0" /></a></dt>
				<dd id="smenu4">
					<ul>
						<li><a href="#">sous-menu 1.1</a></li>
						<li><a href="#">sous-menu 1.2</a></li>
						<li><a href="#">sous-menu 1.3</a></li>
						<li><a href="#">sous-menu 1.4</a></li>
					</ul>
				</dd>
		</dl>
			
		<dl>
			<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"><a onmouseover="javascript:montre('smenu5');"
href="#"><img src="images/decouvrir.gif" border="0" /></a></dt>
				<dd id="smenu5">
					<ul>
						<li><a href="#">sous-menu 1.1</a></li>
						<li><a href="#">sous-menu 1.2</a></li>
						<li><a href="#">sous-menu 1.3</a></li>
						<li><a href="#">sous-menu 1.4</a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');"><a onmouseover="javascript:montre('smenu6');"
href="#"><img src="images/demarche.gif" border="0" /></a></dt>
				<dd id="smenu6">
					<ul>
						<li><a href="#">sous-menu 1.1</a></li>
						<li><a href="#">sous-menu 1.2</a></li>
						<li><a href="#">sous-menu 1.3</a></li>
						<li><a href="#">sous-menu 1.4</a></li>
					</ul>
				</dd>
		</dl>
	</div>

merci beaucoup de votre aide
Modifié par dedel53 (24 Jan 2007 - 15:06)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation