Menu deroulant css et image entete du menu

Bonjour,

J ai realisé un menu deroulant en CSS... qui fonctionne bien !

pour le rendre visuellement plus sympa, je souhaite ajouter une image "entete" du sous menu...

j ai donc ajouter un <li><img ... /></li>

le probleme est que cette image n apparait pas "collé" au reste du menu mais quelques pixels au dessus...


le resultat est donc du genre :

|----------|
| image |
|----------|



|----------|
| menu |
|----------|


alors que je souhaiterai avoir quelque chose comme :

|----------|
| image |
| menu |
|----------|

Quelqu un aurait il la solution à mon probleme ?
merci


voici le code HTML

	<div id="menuentete">
	
	<ul id="menuDeroulant">
	<li><a href="">titre</a></li>
	<li><a href="">titre</a>
		<li><a href="">titre</a>
		<ul class="sousMenu">
[b]		<li style="height:10px; margin-bottom:10px;"><img src="images/menuderoulanthaut.gif"   /></li>[/b]
		<li><a href="">soustitre</a></li>
		<li><a href="">soustitre</a></li>
		<li><a href="">soustitre</a></li>
		<li><img src="images/menuderoulantbas.gif" /></li>
		</ul>
	</li>

	<li><a href="">titre</li>
	<li><a href="">titre</a></li>
	<li><a href="">titre</a></li>
	</ul>

	</div>

CSS

#menuDeroulant{
 width: 950px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: absolute;
 top: 160;
 left: 180;
 z-index:10;
}


#menuDeroulant li{
 width: 100px;
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}


#menuDeroulant .sousMenu{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}


#menuDeroulant .sousMenu li{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width:149px;

border-top: 1px solid transparent;
border-right: 1px solid transparent;

 
}



#menuDeroulant li a:link, #menuDeroulant li a:visited{
 display: block;
 height: 1%; color: #FFF;
 margin: 0;
 text-decoration: none;

}


#menuDeroulant .sousMenu li a:link,#menuDeroulant .sousMenu li a:visited{
 display: block;
 color:#585757; /*#B27777;*/
 margin: 0;
 border: 0;
 text-decoration: none;
 background-color: #E6E4E4;
 width:350px;
 text-align:left;

}

#menuentete {
	
	padding: 0px 0;
	background: url(../images/menubarre2.gif);
	width:950px;
	height:41px;
	
	
}


#menuentete ul { 
	padding:0;
	margin:0;
 	list-style-type:none;
} 

#menuentete li { 
	margin-left:2px;
	float:left; /*pour IE*/
} 

#menuentete ul li a {
	display:block;
	float:left; 
	width:100px; 
	color:#ffffff;
	cursor: pointer;
	font-family: Arial;
	font-weight: bold;
	text-decoration:none; 
	text-align:center;
	padding:10px; 

} 

#menuentete ul li a:hover {
	display:block;
	float:left; 
	width:100px; 
	color:#FF0700; 
	cursor: pointer;
	font-family: Arial;
	font-weight: bold;
	text-decoration:none; 
	text-align:center;
	padding:10px; 
} 

merci

je pense que mon probleme est lié à un probleme de margin ou padding ... mais je ne trouve pas le quel !