Several ways to implement a second-level dropdown menu in a navigation menu using JavaScript

Recently, I have sorted out three methods for implementing secondary dropdown menus in navigation menus with JavaScript, which is convenient for application in projects.

　How to implement the second-level dropdown menu in the navigation menu bar?

　　We can see some second-level dropdown menus used on large websites like Taobao and Sohu, such as the following picture.

But how to implement a similar image? In fact, there are at least three ways to implement it. Below, I attach the code for your reference.

1Only use HTML and CSS

<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; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*Key point one: Set the second-level menu to display: none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*Key point two: Set display to block when hovering over the first-level menu subordinate to the second-level menu*/
ul li:hover ul{display: block;}
</style>
<div id="nav">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Car</a>
      <ul>
        <li><a href="#">Audi</a> </li>
        <li><a href="#">Dodge</a> </li>
      </ul>
    </li>
    <li><a href="">Mobile</a>
      <ul>
        <li><a href="#">Xiaomi</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 quite good, as it ensures complete separation of structure and presentation.

2Implement with JavaScript

<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; height: 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</a></li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Car</a>
  <!-- Key point one: Set the time execution program within the first-level title tag subordinate to the second-level title, and this represents the li element -->
      <ul>
        <li><a href="#">Audi</a> </li>
        <li><a href="#">Dodge</a> </li>
      </ul>
    </li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Mobile</a>
      <ul>
        <li><a href="#">Xiaomi</a> </li>
        <li><a href="#">Huawei</a> </li>
      </ul>
    </li>
    <li><a href="#">Contact us</a></li>
  </ul>
</div>

It is more麻烦 to implement with JavaScript, and the structure and behavior are not separated here (although it is possible to separate the structure and behavior by using DOM in JavaScript, but it is very繁琐), not recommended.

3Implement with jQuery

　　jQuery is a JavaScript library that we can download the latest version of the library file from the jQuery official website. The compressed files are for products, and the uncompressed files are for developers to learn and debug. After downloading to the local machine, you need to reference the library file in the html, as jQuery is essentially JavaScript, so the referencing method is:

The following code is used to implement a second-level dropdown menu with jQuery:

<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; height: 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</a></li>
    <li class="navmenu"><a href="">Car</a>
      <ul>
        <li><a href="#">Audi</a> </li>
        <li><a href="#">Dodge</a> </li>
      </ul>
    </li>
    <li class="navmenu"><a href="">Phone</a>
      <ul>
        <li><a href="#">Xiaomi</a> </li>
        <li><a href="#">Huawei</a> </li>
      </ul>
    </li>
    <li><a href="">Contact Us</a></li>
  </ul>
</div>

　It is obviously very convenient to use jQuery.

The final implementation effect is as follows;

When the mouse pointer hovers over the first-level menu, the corresponding second-level menu will appear.

　Thank you for reading, I hope it can help you. Thank you for your support to our site!

Basic Tutorial