Member Avatar for boa

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>
  • 1 Contributor
  • 1 Reply
  • 328 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by boa
Member Avatar for boa

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.