CSS Dropdown Menu Issue

Hi, I am running into problems with creating a dropdown CSS/JS menu.

The below code is a bare skeleton. My current goal is getting the submenus to be correctly placed under their corresponding menu.

<!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> <title>My Navbar</title> <style type="text/css"> #navbar { margin-left:0px; width:100%; height:30px; position:relative; } #navbar ul { padding:0px; white-space: nowrap; } #navbar li { line-height:30px; z-index:20; list-style:none outside none; display:inline; } .sub { z-index:50; position:absolute; top:0px; margin-top:1em; } body { width:100%; } #outerwrapper { position:absolute; width:800px; left:50%; margin-left:-400px; text-align:left; } #navbar ul span { padding-right:10px; } </style> <script type="text/javascript"> function showmenu(id) { document.getElementById(id).style.visibility = "visible"; } </script> </head> <body> <div id="outerwrapper"> <div id="navbar"> <ul> <li style="position:relative;"> <span onMouseover="showmenu('sub1')">Menu item 1</span> <ul class="sub" id="sub1" style="visibility:hidden; margin-top:0px;"> <li><div style="border:1px black solid; width:auto">Sub</div></li> </ul> </li> <li style="position:relative;"> <span onMouseover="showmenu('sub2')">Menu item 2</span> <ul class="sub" id="sub2" style="visibility:hidden; margin-top:0px;"> <li><div style="border:1px black solid; width:auto">Sub 2</div></li> <li><div style="border:1px black solid; width:auto">Sub 3</div></li> </ul> </li> </ul> </div> </div> </body> </html>

boa

Newbie Poster

2 posts since Oct 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

Figured it out.

<!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>
<title>My Navbar</title>
<style type="text/css">

#navbar 
{
	margin-left:0px;
	width:100%;
	height:30px;	
	position:relative;
}

#navbar ul
{
	padding:0px;	
	white-space: nowrap;		
}

#navbar ul li
{
	display:inline;
	z-index:10;
	float:left;
	width:100px;
	line-height:30px;
	list-style:none outside none;
}

.sub
{
	display:marker;
	width:0px;
	z-index:9001;
	position:absolute;
	top:1.5em;
}

.submenu
{
	width:200px;
}

.sub li
{
	display:inline-block;
}

body
{
	width:100%;
}

#outerwrapper
{
	position:absolute; 
	width:800px; 
	left:50%; 
	margin-left:-400px; 
}

#navbar ul span
{
	padding-right:10px;
}


</style>

<script type="text/javascript">
function showmenu(id)
{
	document.getElementById(id).style.visibility = "visible";
}

function removemenu(id)
{
	document.getElementById(id).style.visibility = "hidden";
}

</script>
</head>

<body>
<div id="outerwrapper">
	<div id="navbar">
	<ul>
		<li style="position:relative; ">
			<span onMouseOut="removemenu('sub1')" onMouseover="showmenu('sub1')">Menu item 1</span>
			<ul	onMouseOut="removemenu('sub1')" onMouseover="showmenu('sub1')" class="sub" id="sub1" style="visibility:hidden;">
				<li><div class="submenu" style="border:1px black solid;">Sub</div></li>
			</ul>
		</li>		
		<li style="position:relative; ">
			<span onMouseOut="removemenu('sub2')" onMouseover="showmenu('sub2')">Menu item 2</span>
			<ul onMouseOut="removemenu('sub2')" onMouseover="showmenu('sub2')" class="sub" id="sub2" style="visibility:hidden;">
				<li><div class="submenu" style="border:1px black solid;">Sub 2</div></li>
				<li><div class="submenu" style="border:1px black solid;">Sub 3</div></li>
			</ul>
		</li>
		
	</ul>
	</div>
</div>
</body>

</html>

boa

Newbie Poster

2 posts since Oct 2010

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You