JS implementation of the two-level Drop-down menu in the navigation menu of several ways _javascript skills

Recently sorted out, JS implementation of the navigation menu in the two Drop-down menu of three ways to facilitate the application of the project.

How do I implement the level two Drop-down menu in the navigation menu bar?

We are in Taobao, Sohu and other large sites can see the use of some of the two Drop-down menu, such as the following picture.

But how do you implement a similar picture? In fact, we have at least three ways to implement, below, I enclose the code for your reference.

1. Use HTML and CSS only

<meta charset= "UTF-8" > <title>Document</title> <style> *{margin:0;padding:0;list-style:
None;text-decoration:none;} #nav {width:500px;height:40px;background: #ccc; margin:0 auto;} ul{background: #aaa} ul li{float:left; display:block; ight:40px; line-height:40px; Padding:0 20px;
Position:relative;} UL Li:hover{background: #cea; UL li ul li{float:none}/* Key one: The level two menu is set to display:none;*/ul Li ul{position:absolute;top:40p x;left:0;
Display:none;} UL Li ul li:hover{background:red./* Key two: In the two level menu subordinate to the first level menu, set to display:block;*/ul Li:hover Ul{display:block; </style > <div id= "nav" > <ul> <li><a href= "" > Home </a></li> <li><a href = "" > Auto </a> <ul> <li><a href= "#" > Audi </a> </li> <li><a href= "#" > Dodge </a> </li> </ul> </li> <li><a href= "" > Mobile </a> & Lt;ul> <li><A href= "#" > Millet </a> </li> <li><a href= "#" > Huawei </a> </li> </ul> 
 </li> <li><a href= "" > Contact us </a></li> </ul> </div>

We can see that this method is better, and it ensures a complete separation of structure and performance.

2. Use JavaScript to implement

<meta charset= "UTF-8" > <title>Document</title> <style> *{margin:0;padding:0;list-style:
None;text-decoration:none;} #nav {width:500px;height:40px;background: #ccc; margin:0 auto;} ul{background: #aaa} ul li{float:left; display:block; ight:40px; line-height:40px; Padding:0 20px;
Position:relative;} UL Li:hover{background: #cea; UL Li ul Li{float:none;} ul li ul{position:absolute;top:40px;left:0; Display:none} ul L I ul li:hover{background:red;} </style> <div id= "nav" > <ul> <li><a href= "#" > Home page ;/a></li> <li onmouseover= "Show (This)" onmouseout= "Hide (This)" ><a href= "#" > Auto </a> <!- -Key one: In the level two title subordinate to the first level of the title tag set time execution program, this represents when this Li element--> <ul> <li><a href= "#" > Audi </a> < /li> <li><a href= "#" > Dodge </a> </li> </ul> </li> <li Onmouseo Ver= "Show (This)" onmouseout= "Hide (This)" ><a href= "#"> Mobile </a> <ul> <li><a href= "#" > Millet </a> </li> <li><a HRE f= "#" > Huawei </a> </li> </ul> </li> <li><a href= "#" > Contact Us </a></li&
  Gt 
 </ul> </div>

Using JavaScript is cumbersome, and there is no separation between structure and behavior (although you can try to create a DOM in JavaScript that makes structure and behavior separate but cumbersome), it is not recommended.

3. Implement with jquery

jquery is a JavaScript library where we can download the latest version of the library file on the jquery Web site, where the compressed files are for the product, and the compressed files are easy for developers to learn and debug. After downloading to this computer, you need to reference the library file to HTML, because jquery is also javascript in nature, so the reference is as follows:

<script src= "path name" ></script>

The code for implementing the Level two Drop-down menu in jquery is as follows:

<meta charset= "UTF-8" > <title>Document</title> <style> *{margin:0;padding:0;list-style:
None;text-decoration:none;} #nav {width:500px;height:40px;background: #ccc; margin:0 auto;} ul{background: #aaa} ul li{float:left; display:block; ight:40px; line-height:40px; Padding:0 20px;
Position:relative;} UL Li:hover{background: #cea; UL Li ul Li{float:none;} ul li ul{position:absolute;top:40px;left:0; Display:none} ul Li ul li:hover{background:red;} </style> <div id= "nav" > <ul> <li><a href= "" > Home Page ;/a></li> <li class= "Navmenu" ><a href= "" > Auto </a> <ul> <li><a HR ef= "#" > Audi </a> </li> <li><a href= "#" > Dodge </a> </li> </ul> < /li> <li class= "Navmenu" ><a href= "" > Mobile </a> <ul> <li><a href= "#" > Small M </a> </li> <li><a href= "#" &GT, Huawei </a> </li> </ul> </li> <li><a href= "> Contact us </a></li> & 
 Lt;/ul> </div>

<!--Key One: the introduction of jquery library file-->

Obviously, using jquery is very convenient.

The final realization effect is as follows;

That is, when the mouse across the first level menu, there will be a corresponding level two menu.

Thank you for reading, I hope to help you, thank you for your support for this site!