Lista som gör mig galen!

Ja, precis som rubriken antyder...
har klippt och klistrat och tagit delen som jä*las för mig.
Ser inte alls likadant ut i IE, opera & Firefox. Om jag anger en höjd på den omgivande diven #meny ser det lite bättre ut men det vill jag ju inte! Har dom hemska kanterna för att se vad som händer egentligen. Vill ju att listan ska fylla ut hela diven också och att diven ska anpassa sin höjd efter listan naturligtvis. Jag gissar ju att det inte är så hemskt komplicerat det här men nu går jag för dagen innan min hjärna exploderar och det vill jag ju inte... helst.

CSS:

/* TOPPMENYN */
#meny	{
	width: 45em;
	border-top: 10px solid red;
	border-right: 10px solid navy;
	border-bottom: 10px solid aqua;
	border-left: 10px solid yellow;
	}
/* ******************************************* */
/* MENY - TOPP ******************************* */
/* ******************************************* */
#meny ul	{
	float: left;
	background: #2175bc;
	/*height: 100%;*/
	width: 100%;
	margin: 0;
	padding: 0;
	}
#meny li, #meny ul	{
	/*display: inline;*/
	/*height: 100%;*/
	background: #2175bc;
	width: 100%;
	margin: 0;
	padding: 0;
	}
#meny li	{
	float: left;
	list-style: none;
	display: block;
	width: 7em;
	/*height: 100%;*/
	margin: 0;
	padding: 0;
	/*padding: 0.1em 0 0.1em 0.7em;*/
	}
#meny a	{
	display: block;
	float: left;
	}
#meny li a	{
	display: block;
	float: left;
	/*height: 100%;*/
	font: 0.8em verdana, arial, sans-serif;
	color: black;
	text-decoration: none;
	}
html>body #meny li a {
	width: auto;
	height: auto;
	}

Html:

<div id="meny">
<ul>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
</ul>
</div>

Tack på förhand!

/ Mikael