CSS Javascript Dropdown menu not overlapping

Hi there,

I have a dropdown menu and i was wondering how do i get about overlapping the div below it when i over hover my button called Hosting now when i do thats its pushing everything down and i want it to go overtop when i have the mouse hover over hosting button the code is below.

Any help would be good thanks below is the code.

//CSS Code
	#Logo{
	margin-left:242px;
	margin-top:35px;
	}
#header{
	width:779px;
	height:187px;
	float:left;
	background-image:url(../images/bannerbg.gif);
	background-repeat:no-repeat;
	position:absolute;
	z-index:779px;
	}
		#nav{
			width:779px;
			height:70px;
			float:left;
			background-image:url(images/navbg.gif);
			background-repeat:no-repeat;
		}
		div.menu{
		background-color:#2e98aa;
		float:left;
		background-repeat:repeat;
		color:#FFFFFF;
		clear:both;
		font-weight:bold;
		position:absolute;
		}
		#nav-name{
		margin-left:25px;
		margin-top:25px;
		margin-right:25px;
		margin-bottom:25px;
		color:#FFFFFF;
		float:left;
		font-weight:bold;
		height:70px;
		width:50px;
		}
//CSS Code
//Javascript code//
<script type="text/javascript">
			function showmenu(elmnt)
			{
				document.getElementById(elmnt).style.visibility="visible"
			}
			function hidemenu(elmnt)
			{
				document.getElementById(elmnt).style.visibility="hidden"
			}
		</script>
//Javascript code
//html code//
<div id="nav" style="background-image:url(images/navbg.gif);">
			<div id="nav-name"><a href="#">About</a></div>
			<div id="nav-name" onmouseover="showmenu('hosting')" 
			onmouseout="hidemenu('hosting')">
			<a href="#">Hosting</a>
					<div class="menu" id="hosting">
					<table>
						<tr>
							<th><a href="#">Shared</a></th>
						</tr>
						<tr>
							<th><a href="#">Reseller</a></th>
						</tr>
						<tr>
							<th><a href="#">VPS</a></th>
						</tr>
						<tr>
							<th><a href="#">Windows</a></th>
						</tr>
					</table>
					</div>
				</div>
			<div id="nav-name"><a href="#">Services</a></div>
			<div id="nav-name"><a href="#">Support</a></div>
		</div>
		<div id="header" style="background-image:url(images/bannerbg.gif); background-repeat:no-repeat;">
			<div id="Logo"><img src="images/logo.gif" alt="Logo for BC Hosting"/></div>
		</div>
//

Select allOpen in new window