Navigation Bar help.. mouseover..

It works fine when you move the mouse over each ‘button’ on the navigation bar. But, when you move the mouse away from the navigation bar, the last thing you were hovering over stays open and dropped down. How do I get it to disappear?

Here’s the code:

<style type=”text/css”>
<!–
/* CSS issu des tutoriels [url]www.alsacreations.com/articles[/url] */
body {
margin: 0;
padding: 0;
background: white;
font: 70% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 117;
left: 100;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 7em;
margin: 0 1px;
}
#menu dt {
color: #ffffff;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #000;
border: 1px solid black;
}
#menu dd {
border: 1px solid white;
}
#menu li {
text-align: center;
background: #8c0000;
}
#menu li a, #menu dt a {
color: #ffffff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #8c0000;
border: 1px solid white;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #ffffff;
background-color: #ddd;
padding: 5px;
border: 1px solid black;
}

a {text-decoration: none;
color: white;
color: #ffffff;
}
–>
</style>

<div id=”menu”>
<dl>
<dt onmouseover=”javascript:montre(‘smenu1’);”>District Home</dt>
<dd id=”smenu1″>
<ul>
<li><a href=”http://liberal.k12.mo.us/”>Home</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover=”javascript:montre(‘smenu2’);”>Academics</dt>
<dd id=”smenu2″>
<ul>
<li><a

href=”http://district.liberal.k12.mo.us/district/el/Lists/Teacher%20Web%20Pages/AllItems.aspx”>Elementary</a></li>
<li><a

href=”http://district.liberal.k12.mo.us/district/ms/Lists/TeacherDepartment%20Web%20Pages/AllItems.aspx”>Middle

School</a></li>

<li><a

href=”http://district.liberal.k12.mo.us/district/hs/Lists/TeacherDepartment%20Web%20Pages/AllItems.aspx”>High

School</a></li>
</ul>
</dd>
</dl>
</div>

Also in #CSS _↴