just after and specify for mouse over menu, only for mouse click menu. In the document, within the menu: Add / remove appropriate id="menu#" and id="submenu#" and show[hide]Submenu(#) NOTE: use   instead of spaces in submenu voices, or lines may break on some browsers */ function hideAll () { document.getElementById('submenu1').style.display = 'none'; document.getElementById('submenu2').style.display = 'none'; document.getElementById('submenu3').style.display = 'none'; document.getElementById('submenu4').style.display = 'none'; document.getElementById('submenu5').style.display = 'none'; document.getElementById('submenu6').style.display = 'none'; document.getElementById('submenu7').style.display = 'none'; document.getElementById('submenu8').style.display = 'none'; document.getElementById('submenu9').style.display = 'none'; document.getElementById('submenu10').style.display = 'none'; // add / remove lines here when adding / removing horizontal menu sections } function showhideSubmenu (i) { // The display variable is initialized at the document beginning, just after id = 'submenu' + i; if (display != i) { hideAll(); document.getElementById(id).style.display = 'block'; document.getElementById(id).style.zIndex=100; display = i; } else { document.getElementById(id).style.display = 'none'; display = 0; } } function showSubmenu (i) { id = 'submenu' + i; hideAll(); document.getElementById(id).style.display = 'block'; document.getElementById(id).style.zIndex=100; } // -->