Navigation Problem with Popout Bars

[R4nk3d]

So I am making a site nav using php and javascript. PHP grabs the links from the mysql database and writes them while javascript makes it so when u hover over the group links, the pages of that group pop out to the right of them. The only problem i am having is the div stretches down I think and so when u hover over one group, then move the mouse down to hover over the next link, it wont let u because ur still on the div. Can you please take a look at it?

http://152.160.5.14/2020comm.com/

 

Heres the javascript code:

	function loadGroup(id)
{
	document.getElementById(id).style.display = "block";
	document.getElementById(id).style.visibility = "visible";
	return 1;
}
function unloadGroup(id)
{
	document.getElementById(id).style.display = "none";
	document.getElementById(id).style.visibility = "hidden";
	return 1;
}

and here is the dynamic style (written by php) for each group, everything stays the same except for the number in the name:

#nav_menu_1 {
				display:none;
				width:auto;
				height:auto;
				margin:0;
				padding:0;
			}
			#nav_menu_1 a {
				display:block;
				width:auto;
				height:auto;
				position: relative;
				top:-30px;
				left:226px;
				z-index:2;
				margin: 0;
				padding:0;
			}

 

and then here is the style in the css file for the nav bar:

#left_nav {
width:225px;
text-align: left;
margin: 0px;
padding: 0px;
padding-bottom:20px;
border-right:solid 1px #000;
vertical-align: top;
padding-top:10px;
}
#navigation {
margin:0;
padding:0;
z-index:20;
}
#navigation div {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#navigation div a
{
position: relative;
margin: 0;
padding: 0;
width: auto;
text-align: left;
}
#navigation li {
margin: 0;
padding: 0;
list-style: none;
}
#navigation li a {
margin:0;
padding:0;
display:block;
}

 

 

And in IE, it has the spaces between them, how can i fix that?