Full version: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Horizontal Navigation
URL: https://www.javascriptbank.com/multilevel-drop-down-horizontal-navigation.html
This code uses both CSS and JavaScript for creating multilevel drop down navigation menus, submenus will appear when users move mouse over them. Customize it as you want, menu is created with CSS - a modern web design technique, by using unordered lists and hidden layers.
Full version: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Horizontal Navigation
URL: https://www.javascriptbank.com/multilevel-drop-down-horizontal-navigation.html
<style type="text/css">#dd { margin-left: 25%; padding: 0 0 20px 0;}#dd li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial;}#dd li a.menu { display: block; text-align: center; background: #5970B2; padding: 4px 10px; margin: 0 1px 0 0; color: #FFF; width: 60px; text-decoration: none;}#dd li a.menu:hover { background: #49A3FF;}.submenu { background: #EAEBD8; border: 1px solid #5970B2; visibility: hidden; position: absolute; z-index: 3;}.submenu a { display: block; font: 11px arial; text-align: left; text-decoration: none; padding: 5px; color: #2875DE;}.submenu a:hover { background: #49A3FF; color: #FFF;}</style><script type="text/javascript">// Created by: Konstantin Jagello | http://javascript-array.com/var TimeOut = 300;var currentLayer = null;var currentitem = null;var currentLayerNum = 0;var noClose = 0;var closeTimer = null;function mopen(n) { var l = document.getElementById("menu"+n); var mm = document.getElementById("mmenu"+n); if(l) { mcancelclosetime(); l.style.visibility='visible'; if(currentLayer && (currentLayerNum != n)) currentLayer.style.visibility='hidden'; currentLayer = l; currentitem = mm; currentLayerNum = n; } else if(currentLayer) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentitem = null; currentLayer = null; }}function mclosetime() { closeTimer = window.setTimeout(mclose, TimeOut);}function mcancelclosetime() { if(closeTimer) { window.clearTimeout(closeTimer); closeTimer = null; }}function mclose() { if(currentLayer && noClose!=1) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentLayer = null; currentitem = null; } else { noClose = 0; } currentLayer = null; currentitem = null;}document.onclick = mclose; </script><ul id="dd"> <li><a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">Home</a> <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="http://javascriptbank.com/">HTML Tutorials</a> <a href="http://javascriptbank.com/">DHTML Tutorials</a> <a href="http://javascriptbank.com/">JavaScript Tutorials</a> <a href="http://javascriptbank.com/">CSS Tutorials</a> </div> </li> <li><a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">Download</a> <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="http://javascriptbank.com/">ASP Scripts</a> <a href="http://javascriptbank.com/">PHP Scripts</a> <a href="http://javascriptbank.com/">Ajax Scripts</a> <a href="http://javascriptbank.com/">Perl Scripts</a> </div> </li> <li><a href="#" class="menu">Order</a></li> <li><a href="#" class="menu">Help</a></li> <li><a href="#" class="menu" id="mmenu3" onmouseover="mopen(3);" onmouseout="mclosetime();">Contact</a> <div class="submenu" id="menu3" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="http://javascriptbank.com/">Office</a> <a href="http://javascriptbank.com/">Sales</a> <a href="http://javascriptbank.com/">Customer Service</a> <a href="http://javascriptbank.com/">Shipping</a> </div> </li></ul>