Navigation Bar help.. mouseover..

[austinm08]

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 www.alsacreations.com/articles */
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>

[holyhttp]

To "get it to disappear" you need to add "onmouseOut" event handler as well.
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache('smenu2');" >Academics</dt>

then define your function chache(lemenu){.... } to hide the submenu.

Bonne chance!

[austinm08]

Alright, thanks.

I decided to completely scrap that, after finding a different navigation bar.

I appreciate the help!