the swith menu. helps reduce space and pages. its a combination of javascript, css, and html, make sure you know how to use these.


Javascript
<script type="text/javascript"> function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById('nav').getElementsByTagName('div'); if(el.style.display == 'none'){ for (var i=0; i<ar.length; ++i){ ar[i].style.display = 'none'; } el.style.display = 'block'; }else{ el.style.display = 'none'; } } } function ChangeClass(menu, newClass) { if (document.getElementById) { document.getElementById(menu).className = newClass; } } document.onselectstart = new Function('return false'); </script>

css
<style type="text/css"> .menu-off { width: 160px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 8pt; margin: 1px; background-color: #330066; color: #ffffff; border-bottom: 1px solid black; padding: 2px; text-align: center; cursor: pointer; } .menu-on { width: 160px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 8pt; margin: 1px; background-color: #3300FF; color: #eeeeee; border-bottom: 1px solid black; padding: 2px; text-align: center; cursor: pointer; } .menu-child { width: 160px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 8pt; } .menu-child a { background-color: #CCCCCC; display: block; padding-top: 2px; padding-left: 37px; color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; border-bottom:solid 1px #000000; text-decoration: none; } .menu-child a:hover { background-color: #3366CC; color: #FFFFFF; text-decoration:none; } </style>

remember that your javascript and your css goes inbetween your header tags

html
<div id="nav"> <p id="menu1" class="menu-off" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menu-on')" onmouseout="ChangeClass('menu1','menu-off')">Title</p> <div class="menu-child" id="sub1" style="display:none;"> <a href="url here">link</a> <a href="url here">link</a> <a href="url here">link</a> </div> <p id="menu2" class="menu-off" onclick="SwitchMenu('sub2')" onmouseover="ChangeClass('menu2','menu-on')" onmouseout="ChangeClass('menu2','menu-off')">Title</p> <div class="menu-child" id="sub2" style="display:none;"> <a href="url here">link</a> <a href="url here">link</a> <a href="url here">link</a> </div> <p id="menu3" class="menu-off" onclick="SwitchMenu('sub3')" onmouseover="ChangeClass('menu3','menu-on')" onmouseout="ChangeClass('menu3','menu-off')">Title</p> <div class="menu-child" id="sub3" style="display:none;"> <a href="url here">link</a> <a href="url here">link</a> <a href="url here">link</a> </div> <p id="menu4" class="menu-off" onclick="SwitchMenu('sub4')" onmouseover="ChangeClass('menu4','menu-on')" onmouseout="ChangeClass('menu4','menu-off')">Title</p> <div class="menu-child" id="sub4" style="display:none;"> <a href="url here">link</a> <a href="url here">link</a> <a href="url here">link</a> </div> </div>