I am trying to create a JavaScript menu, but I can't hide the sub-menu?
I am trying to create a menu with JavaScript for a friend of mine. I can't get the part that drops down to be invisible though. My code is below. Any ideas?

HTML File:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/
<html>
<head>
<title>AGLP 2011</title>
<link rel="stylesheet" type="text/css" href="Main.css" />
<script type="text/javascript">
function showmenu(menu) {
var menuStyle=document.getElementByID(menu).…
menustyle.display="block";
}
function hidemenu(menu) {
var menuStyle=document.getElementByID(menu).…
menuStyle.display="none";
}
</script>
</head>
<body>
<table class="nobo">
<!--<tr>
<td><img src="media/site/aglplogol.gif" /><img src="media/site/aglplogor.gif" />
<a class="menu" href="index.htm">Home</a></td>
<td><img src="media/site/1.gif" />
<a class="menu" href="dailies.htm">Dailies</a></td>
<td><img src="media/site/2.gif" />
<a class="menu" href="akis.htm">Alaska Is</a></td>
<td><img src="media/site/3.gif" />
<a class="menu" href="">Day Jump...</a></td>
<td><img src="media/site/4.gif" />
<a class="menu" href="">Videos</a></td>
</tr>-->
<tr>
<td onmouseover="javascript:showmenu('DailyM… onmouseout="javascript:hidemenu('DailyMe… class="menu1">
<a href="dailies.htm" class="menu">Dailies</a>
<div id="DailyMenu" class="submenu1">
<a href="dailies/d1.htm">Day 1 Date</a>

<a href="dailies/d2.htm">Day 2 Date</a>

<a href="dailies/d3.htm">Day 3 Date</a>

<a href="dailies/d4.htm">Day 4 Date</a>

<a href="dailies/d5.htm">Day 5 Date</a>

<a href="dailies/d6.htm">Day 6 Date</a>

<a href="dailies/d7.htm">Day 7 Date</a>

<a href="dailies/d8.htm">Day 8 Date</a>

<a href="dailies/d9.htm">Day 9 Date</a>

<a href="dailies/d10.htm">Day 10 Date</a>

<a href="dailies/d11.htm">Day 11 Date</a>

</div>
</td>
</tr>
</table>
<!--<img src="media/site/aglplogol.gif" /><img src="media/site/aglplogor.gif" />
<img src="media/site/1.gif" />
<img src="media/site/2.gif" />
<img src="media/site/3.gif" />
<img src="media/site/4.gif" />-->
<script type="text/javascript">
hidemenu("DailyMenu");
</script>
</body>
</html>

CSS File:

/* Below is the CSS for the menus */
.menu1
{
position: absolute;
/*left: 0px;
top: 0px;
z-index: 1;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.submenu1
{
position: absolute;
/*left: 0px;
top: 20px;*/
width: 100px;
z-index: 0;
}

Any help would be useful.
Thanks in advance,
VB.NET Developer

The correct syntax to hide something is the following:

document.getElementById('theId').style.display='none';
document.getElementById('theId').style.display='inline';

~G

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.