Menu css et probleme de marge avec IE

bonjours à tous!
je suis actuellement en train de réaliser un petit menu en css..il s'agit d'un menu dynamique, lorsque l'on passe la souris sur un bouton, un sous menu apparait a droite. il marche tres bien sous IE et FF lorsque je met une marge égale à 0 à l'ensemble, par contre si je veux le décaler cela ne marche plus sous IE, le sous menu apparait bien, mais il est impossible d'aller sur les éléments en dessous (dnas le nouveau menu) vu que ce dernier disparait.
j'ai du coup tenté de faire une marge, ou un padding à l'élement qui le contient, mais c'est le meme probleme... je ne comprend vraiment pas...

voici mon code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 192px; 
	
	}

 ul li {
	position: relative;
	list-style:none;
	}
	
	/* sous menu */
 li ul {
	list-style:none;
	position: absolute;
	left: 121px; 
	top: 0;
	display: none;
	}

 ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	font-weight:bold;
	background-image:url(img/structure/menu.gif);
	background-repeat:no-repeat;
/*	background: #fff; /* IE6 Bug */
	padding: 10px; 
	border:none;/* 1px solid #ccc;*/
	border-bottom: 0;
	}

/* Fix IE. caché  pour IE Mac \*/
* html  ul li { float: left; height: 1%; }
* html  ul li a { height: 1%; }
/* fin */

 ul li a:hover { 
 color: #E2144A; 
 background-image:url(img/structure/menu.gif);
 background-repeat:no-repeat;

/*background: #f9f9f9;*/ } /*
		
 li ul li a { padding: 10px; } 		
 li:hover ul,  li.over ul { display: block; } 

dans la page:

	  <div id="gauche">

  <ul >
		<li><a href="">Accueil</a></li>
		<li><a href="#">Films Plastiques</a> 
		   <ul>
		     <li><a href="#">Couvertures de Serres</a></li>
		     <li><a href="#">Paillage</a></li>
		   </ul>
		</li>
		<li><a href="#">Les Serres</a>
		   <ul> 
		     <li><a href="#">Tunnel</a></li>
			 <li><a href="#">Verticlair</a></li>
			 <li><a href="#">Multiclair</a></li>
			 <li><a href="#">Equipements Sp&eacute;cifiques</a></li>
		   </ul>
		</li>
		<li><a href="#">Syst&egrave;mes d'arrosage</a>
		   <ul>
		     <li><a href="#">Aspersion automatique</a></li>
			 <li><a href="#">Goutte &agrave; goutte</a></li>
			 <li><a href="#">Aspersion plein champs</a></li>
		   </ul>
		</li>   
		<li><a href="#">Contact</a> </li>		  
 </ul>	


	  </div>

si vous avez une idée...

merci