Simple drop-down menu example

Move mouse to this word: MENU to open a menu.

Source code:

<!-- Example for KLayers project http://www.kruglov.ru/klayers/ (c) Kruglov S.A. 2002 --> <script src="klayers.js"></script> <script> function cancelCloseMenu(){ if(self.tm) clearTimeout(tm) // cancel delayed closing } function showMenu(){ if(!self.menu || !self.submenu){ menu=layer("menulayer") submenu=layer("submenulayer") } cancelCloseMenu() submenu.moveTo(menu.getAbsoluteLeft(), menu.getAbsoluteTop() + menu.getHeight()) // move second menu relatively submenu.show() } function initiateHideMenu(){ tm=setTimeout("hideMenu()",1000) // 1 second delay to close a submenu } function hideMenu(){ submenu.hide() } </script> Move mouse to this word: <span id="menulayer" style="position: relative; background-color: yellow"><a href="#" onmouseover="showMenu(); return true" onmouseout="initiateHideMenu(); return true">MENU</a></span> to open a menu. <div id="submenulayer" style="position: absolute; visibility: hidden; background-color: #00ff00; top: 0px; left: 0px"> <a href="#" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">item1</a><br> <a href="#" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">item2</a></div>