[SOLVED] css menu not displaying corectly

[fantomel]

Hello i've build up a css menu works perfectly in firefox latest version and safari and opera(same latest versions) but in ie7 and ie8 doesn't display correctly the menu from the mouse over is not displaying correctly and and i can't find a solution to fix it maybe someone around here with more experience could help me ?

 

 

 

ul.menu					{ float:left; list-style-type:none; width:330px; margin:10px auto; }
ul.menu li					{ padding:0; float:left; margin:0; }
ul.menu li a				{ display:inline; font-weight:normal; line-height:35px; margin-left:10px; }
ul.menu li a:hover, .menu ul li:hover a		{ text-decoration:none; }
ul.rightmenu	 li ul				{display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200;
top:4.5em; margin-left: auto; margin-right: auto;/*left:0;*/ }
ul.rightmenu	 li:hover ul	{ display:block; }
ul.menu ul li 				{ display:inline; float:none; margin:0px; padding:0px; width:230px; margin-top: -11px;}
ul.rightmenu	 li:hover li a	{ background:none; }
ul.menu li ul a				{ display:inline; height:35px; font-size:12px; font-style:normal; margin:0; padding:0; }
ul.menu li ul a:hover, ul.menu li ul li:hover a		
					{ border:0px; color:#ffffff; text-decoration:none; }
ul.menu p					{ clear:left; }	
ul.rightmenu 			{ float: right; list-style-type:none; margin:10px 90px 0 0; padding:0; }
ul.rightmenu li			{ display: inline; padding:0; margin:0; }

HTML CODE

 

<ul class="menu">
	<li><a href="index.php?url=home&lang=en" ><img src="resources/img/layout/home_03.png" alt="Home"  /></a></li>
<li><a href="index.php?url=howto&lang=en"><img src="resources/img/layout/how_to_03.png" alt="How We Do" /></a></li>
	<li><a href="index.php?url=quality&lang=en"><img src="resources/img/layout/quality_03.png" alt="Quality Control" /></a></li>
	<li><a href="index.php?url=gallery&lang=en"><img src="resources/img/layout/gallery_03.png"  alt="Gallery" /></a></li>
</ul>
<ul class="rightmenu">
	<li><a href="index.php?url=credentials&lang=en"><img src="resources/img/layout/credentials_03.png" alt="Credentials" /></a></li>
		<li><a href="" ><img src="resources/img/layout/products_03.png"  alt="Products" /></a>
<ul>
	<li><a href="index.php?url=buy_products&lang=en"><img src="resources/img/layout/buy_products_03.png" alt="Buy Products"  /></a></li></a>
	<li><a href="index.php?url=buy_waste&lang=en"><img src="resources/img/layout/buy_waste_03.png" alt="Waste Buy" /></a></li>
	</ul>
</li>

	<li><a href="index.php?url=contact&lang=en"><img src="resources/img/layout/contact_03.png"  alt="Contact" /></a></li>
</ul>
<div id="logo"><img src="../resources/img/layout/logo_home.png" /></div>

[Dorky]

im lazy so if you have a link that would help

 

i do see you need to place

display: inline; float: left; overflow: hidden;

all in the

li {