JavaScript: Display and hide the drop-down menu.

JavaScript: Display and hide the drop-down menu.

This article uses JavaScript scripts to display and hide drop-down menus. 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:

<Span style = "font-size: 18px;"> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Code of the external CSS Sample Table style.css file:

<Span style = "font-size: 18px;">/* CSS global settings */* {margin: 0; padding: 0 ;}. nav {background-color: # EEEEEE; height: 40px; width: margin PX; margin: 0 auto;} ul {list-style: none;} ul li {float: left; line-height: 40px; text-align: center;} a {text-decoration: none; color: #000000; display: block; width: 90px; height: 40px ;} a: hover {background-color: #666666; color: # FFFFFF;} ul li {float: none; background-color: # EEEEEE;} ul li ul {display: none;}/* to be compatible with the CSS style set by IE7, it must be written before a: hover */ul li a: link, ul li: visited {background-color: # EEEEEE;} ul li a: hover {background-color: #009933 ;}</span>
External JS script. js file code:

<span style="font-size:18px;">function showsub(li){  var submenu=li.getElementsByTagName("ul")[0];  submenu.style.display="block"; } function hidesub(li){  var submenu=li.getElementsByTagName("ul")[0];  submenu.style.display="none"; }</span> 
The above is all the content in this article. I hope it will help you learn and implement the drop-down menu effect.
Articles you may be interested in:

 

 
  
JS multi-level linkage drop-down menu class, simple implementation of provincial/municipal linkage menu!
 
  
JavaScript drop-down menu implementation code
 
  
Css + js drop-down menu
 
  
JavaScript multi-level drop-down menu code (simple and practical)
 
  
Js implementation code of the three-level drop-down menu
 
  
Js implementation code of a date drop-down menu
 
  
How to refresh the js control drop-down menu
 
  
Code for simulating the select drop-down menu control in js
 
  
Click the js Code to implement the connection jump function from the drop-down menu.
 
  
Js click the drop-down menu to bring up the effect instance