Horizontal drop down menu stuck on mouseover
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!
