JS Application Example-Navigation bar submenu

*{margin:0px Auto; padding:0px;} Make 5 navigation bars first. Make a div below each navigation bar. This div width height is set to 0. In the set of a div. This is a submenu, then the handle menu moves below each navigation bar.

(with relative positioning), set hidden, display:none;

Do mouse over events for each navigation bar. var menu=document.getelementsbyclassname ("menu");

for (i=0;i<menu.length;i++) {menu[i].onmouseover=function () {this.nextsibling.nextsibling.style.display= "block "}}

for (i=0;i<menu.length;i++) {menu[i].onmouseout=function () {this.nextsibling.nextsibling.style.display= "None"} }

Find current menu with this, current menu submenu this.nextsibling

JS Application Example-Navigation bar submenu