This article describes how to display and hide the drop-down menu in JavaScript. For more information, see this article. The knowledge we need to use to implement JavaScript is:
1) JS event: the onmouseover mouse goes through the event and the onmouseout mouse leaves event.
2) Basic JS Syntax: Use the function keyword to define a function.
3) DOM programming: getElementsByTagName () method.
The next step is our production process:
1) Hide level-2 menus: Set CSS styles to hide level-2 menus.
2) Compile the show sub () function: Use getElementsByTagName to obtain the level-2 menu item, and set the level-2 menu display through style. display.
3) Compile the hidesub () function of the hidden sub-menu: Use getElementsByTagName to obtain the level-2 menu item, and set level-2 menu hiding through style. display.
4) Add a mouse event: Add a mouse event to a level-1 menu with a level-2 menu, and call the showsub ()/hidesub () function to display and hide the mouse over the level-1 menu.
5) perform browser compatibility check. There are at least five browsers. IE7, 2345, Firefox, Google, and browsers.
:
HTML code:
Drop-down menu
