Adding a flyout submenu to existing vertical drop menu

[Tim@DIM]

I am tryign to add a flyout (to the right) 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(3)">
       <ul>
        <li><a href="#">chicago</a></li>
        <li><a href="#">detroit</a></li>
        <li><a href="#">toledo</a></li>
        </ul>
       
        <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>

/**<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;}
/***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 **/

known issues:

The child menu (sub menu) is appearing below the parent item.
the parent item disappears when the child menu appears
the child menu does not stay visible when itself or parent item is hovered over
i suck at life