Just cobbled together a menu system for work, and decided to implement it here for my navigation...

and here's the code (thanks to Mark Howells and the URL he threw my way, which was the basis of this script):

<br /> <script language="javascript" type="text/javascript"><br /> <!--</p> <p>cssAllowed=(document.getElementById||document.layers||document.all)?true:false;<br /> cssMessage="CSS not supported. Please upgrade your browser.";<br /> function layerObject(eID){<br /> if(document.getElementById){this.css=document.getElementById(eID).style;}<br /> else if(document.layers){this.css=document.layers[eID];}<br /> else if(document.all){this.css=document.all[eID].style;}<br /> return this<br /> }</p> <p><br /> var pasteID;<br /> function showHide(eID,on){<br /> if(!cssAllowed){alert(cssMessage)}<br /> else{<br /> myLayer=new layerObject(eID)<br /> if(on){<br /> if (pasteID) {<br /> pasteID.css.display="none"<br /> pasteID.css.visibility="hidden"<br /> }<br /> myLayer.css.display="inline"<br /> myLayer.css.visibility="visible"<br /> pasteID = myLayer<br /> }<br /> else{<br /> myLayer.css.visibility="hidden"<br /> myLayer.css.display="none"<br /> pasteID = myLayer<br /> }<br /> }<br /> }<br /> </p> <p>//--> <br /> </script>

To call it into play, use this:
<br /> <a href="#" onMouseOver="showHide('sales',true)">Sales</a></p> <div id="sales" style="display: none;"> this is your hidden text </div> <p>