My horizontal drop down menu is almost complete with the exception of the sub-level menus which remain on screen rather than disappear when you move across to the next menu item. The next item has sub-level menu which also remains stuck on screen - the only way they disappear is by hitting refresh on your screen. I believe I am missing something on my javascript to complete the mouseover effect. Here is my code:

Page standard used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

In my page header:

<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


In the body:

<div id="menu">
<dl>
<dt onmouseover="javascript:show('home');"><a href="index.html">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('sjewelry');"><a href="../jewelry.html">Jewelry</a></dt>
<dd id="sjewelry" onmouseover="javascript:show('sjewelry');" onmouseout="javascript:show();">
<dl>
<li><a href="../jewelry2.html">Jewelry 2</a></li>
<li><a href="../jewelry3.html">Jewelry 3</a></li>
</dl>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('scards');"><a href="../cards.html">Cards</dt>
<dd id="scards" onmouseover="javascript:show('scards');" onmouseout="javascript:show();">
<dl>
<li><a href="../cards2.html">Cards 1</a></li>
<li><a href="../cards3.html">Cards 2</a></li>
</dl>

</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('cds');"><a href="../cds.html">Cds</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('decor');"><a href="../decor.html">Decor</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('faqs');"><a href="../faqs.html">Faqs</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('contact');"><a href="../contact.html">Contact</a></dt>
</dl>
</div>

My "menu css":

/* CSS from tutorials of www.tutorials.alsacreations.com/deroulant */



dl, dt, dd, ul, li{
list-style-type: none;
text-decoration: none;
margin: 0;
color: #fff;
font-size: 16px;
font-weight: bold;
height: 40px;
background-image: url(images/navbar.jpg);
}


#navbar {
clear: both;
background-image: url(images/navbar.jpg);
width: 960px;
height: 40px;
}

#menu {
position: absolute;
z-index:100;
width: 100%;
margin-left: 57px;
margin-right: 0px auto;
/* precision for Opera */
}

#menu dl {
float: left;
width: 120px;
display: block;
line-height: 40px;
background-image: url(images/navbar.jpg);
list-style-type: none;
text-decoration: none;
}

#menu dt {
text-align: center;
font-weight: bold;
font: fff;
background-image: url(images/navbar.jpg);
margin: 0px;
}


I have not yet posted/uploaded the files to the server. I have not studied javascript yet (student) so any help would be appreciated.

Many thanks!