I have one main menu.
I would like to keep it hidden until I click on the menu button icon.
Then I would like it to display the various other menu button links.
www.proamrodeo.com
I can hide it or make it visible by using the div visibility function.
How do I go about it?
This is the code.

<!-- Menu Link- Main -->
<DIV STYLE="position:absolute; top:260px; left:340px; width:90px; border-width:0; visibility: visible; z-index:1">
<a href="javascript:void(0);" onfocus="this.blur();" onMouseOver="document.images['Menu'].src = 'http://www.proamrodeo.com/gif/menu/Menu-over.gif'" onMouseOut="document.images['Menu'].src = 'http://www.proamrodeo.com/gif/menu/Menu.gif'" onMouseDown="document.images['Menu'].src = 'http://www.proamrodeo.com/gif/menu/Menu-down.gif'" onMouseUp="document.images['Menu'].src = 'http://www.proamrodeo.com/gif/menu/Menu.gif'"><img name="Menu" src="http://www.proamrodeo.com/gif/menu/Menu.gif" width="88" height="38" vspace="0" border="0" alt="Menu"></a><br>
</DIV>

<!-- Menu Link PopUp Links -->
<DIV STYLE="position:absolute; top:230px; left:540px; width:90px; border-width:0; visibility:hidden; z-index:1">
<a href="javascript:void(0);"onfocus="this.blur()"
onMouseOver="document.images['About_Us'].src = 'http://www.proamrodeo.com/gif/menu/About_Us-over.gif'"
onMouseOut="document.images['About_Us'].src = 'http://www.proamrodeo.com/gif/menu/About_Us.gif'" onMouseDown="document.images['About_Us'].src = 'http://www.proamrodeo.com/gif/menu/About_Us-down.gif'" onMouseUp="document.images['About_Us'].src = 'http://www.proamrodeo.com/gif/menu/About_Us.gif'">
<img name="About_Us" src="http://www.proamrodeo.com/gif/menu/About_Us.gif" width="90" height="40" vspace="0" border="0" alt="About Us"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="document.images['Partners'].src = 'http://www.proamrodeo.com/gif/menu/Partners-over.gif'" onMouseOut="document.images['Partners'].src = 'http://www.proamrodeo.com/gif/menu/Partners.gif'" onMouseDown="document.images['Partners'].src = 'http://www.proamrodeo.com/gif/menu/Partners-down.gif'" onMouseUp="document.images['Partners'].src = 'http://www.proamrodeo.com/gif/menu/Partners.gif'">
<img name="Partners" src="http://www.proamrodeo.com/gif/menu/Partners.gif" width="90" height="40" vspace="0" border="0" alt="Partners"></a><br>

<a href="http://www.proamrodeo.com/contact.htm" onfocus="this.blur()" target="_new" onMouseOver="document.images['Contact'].src = 'http://www.proamrodeo.com/gif/menu/Contact-over.gif'" onMouseOut="document.images['Contact'].src = 'http://www.proamrodeo.com/gif/menu/Contact.gif'" onMouseDown="document.images['Contact'].src = 'http://www.proamrodeo.com/gif/menu/Contact-down.gif'" onMouseUp="document.images['Contact'].src = 'http://www.proamrodeo.com/gif/menu/Contact.gif'">
<img name="Contact" src="http://www.proamrodeo.com/gif/menu/Contact.gif" width="90" height="40" vspace="0" border="0" alt="Contact"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="document.images['Results'].src = 'http://www.proamrodeo.com/gif/menu/Results-over.gif'" onMouseOut="document.images['Results'].src = 'http://www.proamrodeo.com/gif/menu/Results.gif'" onMouseDown="document.images['Results'].src = 'http://www.proamrodeo.com/gif/menu/Results-down.gif'" onMouseUp="document.images['Results'].src = 'http://www.proamrodeo.com/gif/menu/Results.gif'">
<img name="Results" src="http://www.proamrodeo.com/gif/menu/Results.gif" width="90" height="40" vspace="0" border="0" alt="Results"></a><br>

<a href="#" onfocus="this.blur()" onMouseOver="document.images['Entry'].src = 'http://www.proamrodeo.com/gif/menu/Entry-over.gif'" onMouseOut="document.images['Entry'].src = 'http://www.proamrodeo.com/gif/menu/Entry.gif'" onMouseDown="document.images['Entry'].src = 'http://www.proamrodeo.com/gif/menu/Entry-down.gif'" onMouseUp="document.images['Entry'].src = 'http://www.proamrodeo.com/gif/menu/Entry.gif'"><img name="Entry" src="http://www.proamrodeo.com/gif/menu/Entry.gif" width="90" height="40" vspace="0" border="0" alt="Entry"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="document.images['Links'].src = 'http://www.proamrodeo.com/gif/menu/Links-over.gif'" onMouseOut="document.images['Links'].src = 'http://www.proamrodeo.com/gif/menu/Links.gif'" onMouseDown="document.images['Links'].src = 'http://www.proamrodeo.com/gif/menu/Links-down.gif'" onMouseUp="document.images['Links'].src = 'http://www.proamrodeo.com/gif/menu/Links.gif'">
<img name="Links" src="http://www.proamrodeo.com/gif/menu/Links.gif" width="90" height="40" vspace="0" border="0" alt="Links"></a><br>

<a href="javascript:void(0);" onfocus="this.blur()"
onMouseOver="document.images['Downloads'].src = 'http://www.proamrodeo.com/gif/menu/Downloads-over.gif'" onMouseOut="document.images['Downloads'].src = 'http://www.proamrodeo.com/gif/menu/Downloads.gif'" onMouseDown="document.images['Downloads'].src = 'http://www.proamrodeo.com/gif/menu/Downloads-down.gif'" onMouseUp="document.images['Downloads'].src = 'http://www.proamrodeo.com/gif/menu/Downloads.gif'">
<img name="Downloads" src="http://www.proamrodeo.com/gif/menu/Downloads.gif" width="90" height="40" vspace="0" border="0" alt="Downloads"></a><br>
</DIV>