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>
//

Open in new window

william234Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

glumlunCommented:
you can do this by using position:absolute, z-index and a left value, however i would recommend you use a tried and tested method for displaying dropdown menus such as:

http://htmldog.com/articles/suckerfish/dropdowns/

you are going to hit a host of problems for cross browser compatinility which have been dealt with in the above example
william234Author Commented:
i did what u told me to do above with the code above but this is what i am getting atm live on my website

http://www.bchosting.info/index.php?cmd=Home


the navagation is not being displayed at all for some reason even when i am using a list for the dropdown part

can anyone help me to fix this please thanks
BadotzCommented:
I second glumlun's suggestion. There is no compelling reason to write your own menu system, aside from learning how to do it, I suppose.

Pick one of the hundreds of cross-browser menus available elsewhere on the web, and get some much needed rest.
m1m1kCommented:
Run the following html page (paste into text file and rename to .html) to see whats going on.
Your floating is what's causing you the initial problems, paired with the fact that your z-index (which div goes on top of stack, bottom of stack) also need adjusting.
If you wanted to try to fix your existing code, I would suggest starting with non-floating elements, and then absolutely or relatively position the "popup" menus in relation to the parent menu.

The current main problem (and why its not clickable, is that your div "Logo for BC Hosting" is Overtop (overlapping) all the other divs.  This causes the click to be registered on that div, instead of on the links.
I commented the background:green; so that you could see the rest of the elements, but switching this back on will let you see the result.

Long story short, there are a million things to learn, a million ways to do it, and basically what was suggested earlier is very very valid, and very solid advice.

It took me five minutes to look at the source code from a "free css menu" site and copy their own menus.
I've replaced it with your menu items.  (see code below)
I suggest using code that already works, and then tweaking it to fit your needs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>

<style type="text/css">
/*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;
	/*background-color:Green;*/
	}
#nav
{
	width:779px;
	height:70px;
	float:left;
	background-image:url(images/navbg.gif);
	background-repeat:no-repeat;
	background-color:Yellow;
}

div.menu
{
background-color:#2e98aa;
float:left;
background-repeat:repeat;
color:#FFFFFF;
clear:both;
font-weight:bold;
position:absolute;
background-color:Red;
}

#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;
background-color:Grey;
}
/* END CLIENT CODE, BEGIN NEW CODE */
/* Ganked straight from http://www.cssmenumaker.com/builder/step2.php */
.menu_seperator{
	background:#a0a0a0;
	height:38px;
	text-align:center;
	z-index:100px;

	}
	.menu_seperator_container{
		background:url(http://www.cssmenumaker.com/images/menu_back.jpg) top left repeat-x;
		border-right:10px solid #888888;
		border-left:10px solid #888888;
		height:38px;
		margin:0px auto;
		text-align:left;
		width:1000px;
		}

.menu_bar{
	}
.menu_bar ul{
	height:38px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu_bar li{
		float:left;
		width:9em;
		}
	.menu_bar li a{
		color:#cccccc;
		display:block;
		line-height:38px;
		font-size:13px;
		text-align:center;
		text-decoration:none;
		}
		.menu_bar li a:hover{
			background:url(http://www.cssmenumaker.com/images/menu_hover.jpg) top left repeat-x;
			color:#000000;
			}
	.menu_bar li ul{
		background:#515151;
		display:none;
		height:auto;
		filter:alpha(opacity=95);
		opacity:0.95;
		position:absolute;
		width:225px;
		z-index:2000;
		/*top:1em;
		/*left:0;*/
		}
	.menu_bar li:hover ul{
		display:block;
		}
	.menu_bar li li {
		display:block;
		float:none;
		width:225px;
		}
	.menu_bar li ul a{
		display:block;
		font-size:12px;
		font-style:normal;
		height:30px;
		line-height:30px;
		padding:5px 10px 5px 15px;
		text-align:left;
		}
		.menu_bar li ul a:hover{
			background:#949494;
			color:#000000;
			opacity:1.0;
			filter:alpha(opacity=100);
			}
	.menu_bar p{
		clear:left;
		}
	.menu_bar #menutitle a{
		background:#000000;
		font-weight:bold;
		color:#FFF;
		height:20px;
		line-height:20px;
		}
	.menu_bar #menutitle a:hover{
		background:#000000;
		font-weight:bold;
		color:#FFF;
	}

</style>
<!-- END 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>
<!-- END 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="Div1" 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="Div2"><a href="#">Services</a></div>
			<div id="Div3"><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>
<!-- END HTML code -->

<br style="clear:both;" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<div class="menu_seperator">
  <div class="menu_seperator_container">
    <div class="menu_bar">
      <ul>
        <li><a href="#" >Hosting</a>
          <ul>
            <li id="menutitle"><a>Shared</a></li>
            <li><a href="/drop_down_css_menu.php">Reseller</a>
            <li><a href="/horizontal_css_menu.php">VPS</a>
            <li><a href="/vertical_css_menu.php">Windows</a>
          </ul>
        </li>
        <li><a href="#">Services</a></li>

        <li><a href="#">Support</a></li>
      </ul>
   </div>
  </div>
</div>


</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.