hey i have got a problem with my drop down menu i didn't really create the menu my self i used www.purecssmenu.com the whole thing works on firefox but every other browser shows it 10 times bigger and this is a problem

this is the html

<div id="navigation">
<!-- start of menu -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Home</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>IT Solutions</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Consultancy</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Virtualisation</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">VDI</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Exchange</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Office 365</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>System Center 2012 - Overview</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">SCCM 2012</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">SCOM 2012</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">SCVMM 2012</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">SCDPM 2012</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>IT Support</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Support Packages</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Additional Services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Remote Monitoring</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Mail Flow Monitor</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Hosted Antivirus</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Hosted Message Hygiene</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Asset Tracking</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Contact Us</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Help Desk</a></li>


</ul>
</div>


and the css is


@charset "utf-8";
/* CSS Document */

#pcm{display:none; }

ul.pureCssMenu ul{display:none; }

ul.pureCssMenu li:hover>ul{display:block; }

ul.pureCssMenu ul{position: absolute;left:-1px;top:99%;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-1px; }

ul.pureCssMenu,ul.pureCssMenu ul {
margin-top:4px;
list-style:none;
padding:0px 5px 0px 1px;
width:500px;

}

ul.pureCssMenu table {border-collapse:collapse}

ul.pureCssMenu {
display:block;
zoom:3;
float: left;

}
ul.pureCssMenu ul{
width:auto;

}
ul.pureCssMenu li{
display:block;
margin: 0px 10px 0px 10px;
margin-top:0px;
padding-top:0px;
font-size:0px;
width:500px;

}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
width:500px;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
text-decoration:none;
padding:3px;
font:normal 11px Verdana;
color: #999999;
cursor:default;
background-color:#FFFFFF;
width:auto;
}

ul.pureCssMenu span{
overflow:visible;
width:auto;
}

ul.pureCssMenu li {
float:left;
width:auto;
}

ul.pureCssMenu ul li {
float:none;
width:auto;
}

ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
width:auto;
}

ul.pureCssMenu li:hover{
position:relative;
border-bottom-width:1px;
border-bottom-color:#FF0000;
border-bottom-style:solid;
width:auto;
}

ul.pureCssMenu li:hover>a{
color: #000;
}



i just need some help to find out why it isnt working in. IE, chrome, opera. or if there is a way to create a drop down menu that drops down once and then once again while in that column then that would be much appreciated.