Javascript/CSS Dropdown Menu

**Moshambi** · 09-12-2008, 05:28 PM

I know that there are many scripts on the web that you can find to do this, but I feel that I get too lazy when I just go looking for code rather than trying it myself and having a few pointers on the way...anyway on to the problem.

First I'll show you my code. It is HTML, CSS, and Javascript all in one.

Code:

<html>

<head>

<style type="text/css">

ul
{
	list-style-type: none;
	position: absolute;
	top: 0px;
	left: 0px;
}

ul li
{
	display: block;
	width: 150px;
	height: 30px;
	border: 1px solid black;
	
}

</style>

<script type="text/javascript" language="javascript">

function showSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.visibility = "visible";
}

function hideSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.visibility = "hidden";
}

</script>

</head>

<body>

<ul>
	<li><a href="#"> Home </a></li>
	<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><a href="#"> Nintendo </a></li>
		<ul id="sub1" style="visibility: hidden; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
			<li><a href="#"> NES </a></li>
			<li><a href="#"> SNES </a></li>
			<li><a href="#"> N64 </a></li>
			<li><a href="#"> Gameboy </a></li>
			<li><a href="#"> Gameboy Color </a></li>
			<li><a href="#"> Gameboy Advance </a></li>
		</ul>
	<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><a href="#"> XBOX </a></li>
		<ul id="sub2" style="visibility: hidden; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
			<li><a href="#"> XBOX </a></li>
			<li><a href="#"> XBOX 360 </a></li>
		</ul>
</ul>

</body>

</html>

The menu works how I want it, the only problem is the display of the menu.
Because I am nesting the #sub1, #sub2 as a <ul> it still shows the white space even though the visibility is set to hidden. I tried to change it to display: none; and that works to remove the whitespace but when you hover over it and the menu expands I end up with the same problem. Is there a different way of doing this or what should I change? I will keep tinkering with it and see if I can come up with something, but any help is greatly appreciated! Thank you in advance!

----------> EDIT <-------------

Ok so I kept messing with this and I got it to work now! It is a vertical menu, I'm not sure how to do it for horizontal though...but here is my code now in case any of you wanted to check it out.

Code:

<html>

<head>

<style type="text/css">

ul
{
	list-style-type: none;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
}

ul li
{
	display: block;
	width: 150px;
	height: 30px;
	border: 1px solid black;
}

span
{
	display: block;
	width: 150px;
	height: 30px;
}

#sub1 a, #sub2 a, #sub3 a
{
	display: block;
	width: 150px;
	height: 30px;
}

</style>

<script type="text/javascript" language="javascript">

function showSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.display = "block";
}

function hideSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.display = "none";
}

</script>

</head>

<body>


<ul>
	<li><span> Home </span></li>
	<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><span> Nintendo </span>
		<ul id="sub1" style="display: none; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
			<li><a href="#"> NES </a></li>
			<li><a href="#"> SNES </a></li>
			<li><a href="#"> N64 </a></li>
			<li><a href="#"> Gameboy </a></li>
			<li><a href="#"> Gameboy Color </a></li>
			<li><a href="#"> Gameboy Advance </a></li>
		</ul>
	</li>
	
	<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><span> XBOX </span>
		<ul id="sub2" style="display: none; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
			<li><a href="#"> XBOX </a></li>
			<li><a href="#"> XBOX 360 </a></li>
		</ul>
	</li>
	
	<li onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');"><span> Playstation </span>
		<ul id="sub3" style="display: none; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');" >
			<li><a href="#"> Playstation </a></li>
			<li><a href="#"> Playstation 2 </a></li>
			<li><a href="#"> Playstation 3 </a></li>
			<li><a href="#"> Playstation Portable </a></li>
		</ul>
	</li>
	
	
</ul>
			


</body>

</html>

**Nile** · 09-12-2008, 11:33 PM

Here's horizontal:

Code:

<html>

<head>

<style type="text/css">

ul
{
	list-style-type: none;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
}

ul li
{
	display: block;
	width: 150px;
	height: 30px;
	border: 1px solid black;
	float: left;
}

span
{
	display: block;
	width: 150px;
	height: 30px;
}

#sub1 a, #sub2 a, #sub3 a
{
	display: block;
	width: 150px;
	height: 30px;
}

</style>

<script type="text/javascript" language="javascript">

function showSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.display = "block";
}

function hideSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.display = "none";
}

</script>

</head>

<body>


<ul>
	<li><span> Home </span></li>
	<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><span> Nintendo </span>
		<ul id="sub1" style="display: none; position: relative;padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
			<li><a href="#"> NES </a></li>
			<li><a href="#"> SNES </a></li>
			<li><a href="#"> N64 </a></li>
			<li><a href="#"> Gameboy </a></li>
			<li><a href="#"> Gameboy Color </a></li>
			<li><a href="#"> Gameboy Advance </a></li>
		</ul>
	</li>
	
	<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><span> XBOX </span>
		<ul id="sub2" style="display: none; position: relative;padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
			<li><a href="#"> XBOX </a></li>
			<li><a href="#"> XBOX 360 </a></li>
		</ul>
	</li>
	
	<li onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');"><span> Playstation </span>
		<ul id="sub3" style="display: none; position: relative;padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');" >
			<li><a href="#"> Playstation </a></li>
			<li><a href="#"> Playstation 2 </a></li>
			<li><a href="#"> Playstation 3 </a></li>
			<li><a href="#"> Playstation Portable </a></li>
		</ul>
	</li>
	
	
</ul>
			


</body>

</html>

**Moshambi** · 09-13-2008, 04:44 AM

Oh ya thanks Nile, I totally knew how to do that too, I guess I just overlooked it cuz I was trying to do it more complex then it really was lol :0

Thread: Javascript/CSS Dropdown Menu

Thread Tools

Search Thread

Javascript/CSS Dropdown Menu

Bookmarks

Bookmarks

Posting Permissions