Adding a second tier submenu to existing vertical drop menu

JavaScript
1

I am tryign to add a submenu to my existing vertical drop down menu and im pretty clueless how i can accomplish this.

my current attempt is not working.
here is the code:

<!--drop menu js-->

<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;
</script>
 <!--end drop menu js-->

			<div class="wrapper">
					<ul id="menu">
						<li id="menu_active"><a href="index.html">home</a></li>
						<li><a href="detroitvideoproduction.html" rel="nofollow" onMouseOver="mopen('m1')" onMouseOut="mclosetime(2)">Production</a>
		<div id="m1" class="prod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
		<a href="detroitvideoproduction.html" onmouseover="mopen('m6')" onmouseout="mclosetime(2)">Video Production</a>
        <div id="m6" class="subprod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(9)">

        <a href="#">chicago</a>
        <a href="#">detroit</a>
        <a href="#">toledo</a>
       </div>


        <a href="locationsounddetroit.html">Location Sound</a>
		</li>
					  <li  onMouseOver="mopen('m2')" onMouseOut="mclosetime(2)"><a href="videoeditingdetroit.html" rel="nofollow">Post Production</a>
		<div id="m2" class="postprod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
        <a href="videoeditingdetroit.html">Video Editing</a>
        <a href="custommotiongraphicsdetroit.html">Custom Graphics</a>

		</li>
					  <li><a href="demoreel.html" rel="nofollow" onMouseOver="mopen('m3')" onMouseOut="mclosetime(2)">Demo Reel</a>
        <div id="m3" class="demo" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
       <a href="demoreel.html">Demo Reel</a>
       <a href="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</a>
       <a href="http://vimeo.com/liveoutloudproductions">Vimeo</a>
        </li>
					
    				  <li ><a href="dslrrentalsdetroit.html" rel="nofollow" onMouseOver="mopen('m5')" onMouseOut="mclosetime(2)">Equipment Rentals</a>
    	<div id="m5" class="rent" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(2)">
    	<a href="dslrrentalsdetroit.html">Camera Rental</a>
    	<a href="lectrosonicsrentalsdetroit.html">Audio Rental</a>
    	<a href="griprentalsdetroit.html">Grip Rental</a>
       <a href="camerasupportdetroit.html">Camera Support</a>
            	</li>
    				  <li ><a href="about.html" onMouseOver="mopen('m4')" onMouseOut="mclosetime(2)">About</a>
    	<div align="center" id="m4" class="us" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
		<a href="about.html">About</a>
    	<a href="contact.html">Contact</a>
    	</li>
					</ul>
			  </div>
<style type="text/css">
/**<li> tag have float: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;

Everything else is usual decoration:**/

#menu
{	margin: 0;
	padding: 0;
	z-index: 20;
	clear: all;
		}

#menu li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial}

#menu li a
{	display: block;
	
	background: #232323;
	color: #FFF;
	
	text-decoration: none
	
	}

#menu li a:hover
{	background: #353535}

#menu div
{	position: absolute;
	visibility: hidden;
		 }

	#menu div a
	{	
		display: block;
		
		background:#232323;
		color: #fff;
		}

	#menu div a:hover
	{	background: #353535;
		color: #FFF}
.prod { width:150px;}
.postprod {width:185px;}
.demo {width: 140px;}
.rent {width: 200px;}
.us {width: 111px;}

.subprod{
	margin-left:150px;
	margin-top: -70px;
	width: 150px;
}
/***end drop menu***/

/***NON DROP NAVIGATION*****/
#menu { float:left; margin-top:25px; padding-left:14px; background:url(images/menu_line.gif) right 0 no-repeat; width:958px; height:70px;}
#menu li { float:left; padding-left:1px; background:url(images/menu_line.gif) 0 0 no-repeat}
#menu li a{
	display:block;
	color:#CCC;
	font-size:12px;
	text-transform:uppercase;
	text-decoration:none;
	margin-top:0px;
	padding:18px 30px 14px 38px;
	background:#232323;
}
 #menu #menu_active a{ padding-top:16px; padding-bottom:28px;}

/** END NON DROP NAV **/

.wrapper {
	width:100%;
	text-align:left; /* === We still hate IE === */
	z-index:100;
	overflow:visible;
}

</style>

known issues:

  • as soon as the parent drop menu is hovered over the submenu appears,
    causing the parent item to disappear,
    preventing users from even getting to the items farther down the menu.
  • the child menu does not stay visible when itself or parent item is hovered over
  • i suck at life :slight_smile: