Hi,
I'm trying to create a simply drop down navigation. I just about have it except I cannot get the drop down to align correctly under its appropriate parent. Any advice would be appreciated!

Here is my code:

HTML:

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">About</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Board</a>
<a href="#">Officers</a>
<a href="#">History</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Mission</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Boots</a>
<a href="#">Books</a>
<a href="#">Business</a>
<a href="#">Banks</a>
</div>
</li>
<li><a href="news.html">News</a></li>
<li><a href="partnerships.html">Partnerships</a></li>
</ul>
</div>


CSS:

#navigation {
height: 30px;
width:960px;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #092B59;
}
#navigation ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#navigation li {
list-style-type: none;
display: inline;
}
#navigation li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
#navigation li a:link {
color: #FFF;
}
#navigation li a:visited {
color: #CCC;
}
#navigation li a:hover {
color: #FFF;
background-color: #B4C5D9;
}
#navigation div {
display: block;
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #092B59;
}

#navigation div a {
position: relative;
display: block;
margin: 0;
padding: 0px 5px;
width: 75px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #092B59;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}

#navigation div a:hover {
background: #b4c5d9;
color: #FFF;
}


javascript:

<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>

Many thanks,
Karen