JavaScript drop down navigation styling

[DomC]

I am making a site, for someone and they want a drop down navigation system, and although I have the appearing/disappearing correctly (thanks to a script from another website) can not get the formatting for its location correct (if that makes sense)

I have put the relevant sections of the script below.

The javascript:
[syntax=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; [/syntax]

The navigation:
[syntax=xhtml]<ul id="nav">
<li><a href="index.php">Home</a><li>

<li><a href="marketing.html" onmouseover="mopen('m1')"
onmouseout="mclosetime()">Marketing</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="price.html">Marketing - Price</a>
<a href="product.html">Marketing - Product</a>
<a href="promo.html">Marketing - Promotion</a></li>
</div>

<li><a href="resources.html" onmouseover="mopen('m2')"
onmouseout="mclosetime()">Human Resources</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="leader.html">HR - Leadership</a>
<a href="motivate.html">HR - Motivation</a>
<a href="OS.html">HR - Organisational Structure</a></li>
</div>

<li><a href="AandF.html" onmouseover="mopen('m3')"
onmouseout="mclosetime()">Accounting and Finance</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="cash.html">A and F - Cashflow</a>
<a href="costs.html">A and F - Costs</a>
<a href="invest.html">A and F - Investment</a>
<a href="contribute.html">A and F - Contribution</a></li>
</div>

<li><a href="OPmanagement.html" onmouseover="mopen('m4')"
onmouseout="mclosetime()">Operations Management</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="quality.html">OM - Quality</a>
<a href="waste.html">OM - Waste Managment</a></li>
</div>

<li><a href="Misc.html" onmouseover="mopen('m5')"
onmouseout="mclosetime()">Misc</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="obj.html">Misc - Objectives</a>
<a href="research.html">Misc - Research</a>
<a href="finance.html">Misc - Sources Of Finance</a></li>
</div>

<li><a href="MailingList/su.html">Mailing List</a></li>
<li><a href="contact.html">Contact Us</a></li>

</ul>[/syntax]

The CSS
[syntax=css]#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1.25;
}

#nav a {
display: block;
width: 10em;
}




#nav { clear: both; padding: 13px 0 0; }
#nav li { display: inline; list-style-type: none; font-size: 1.2em; }
#nav li a { float: left; padding: 0 22px 0 0; margin: 0 22px 0 0; color: #ddd; border-right: 1px solid #505052; }
#nav li.last a { border: 0; padding: 0; }
#nav li a:hover { color: #fff; }
#nav li a.current { font-weight: bold; color: #fff; }[/syntax]

If you could possibly help that would be greatly appreciated. You can see a live demo here
Thanks for any help you can possibly give.

[jacek]

The div element #m1 #m2 ... #m5 don't seem to be positioned at all. You need to add the CSS to give them a position.

[DomC]

I'm sure I added it - I must have forgotten!

Note to self: check that the code is actually there before asking silly questions!

[jacek]

It would probably be easiest to set all of them to be visible while styling too.