Implementation of Dropdown Menu with HTML and CSS

The code for the html section is as follows:

<div id="nav">
     <ul>
         <li ><a href="#">home page</a></li>
         <li><a href="#">Learning Center</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>

        </li>
        <li><a href="#">Course Hall</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>


        </li>
        <li><a href="#">Classic case</a></li>
        <li><a href="#">About us</a></li>


    </ul>

</div> 

It should be noted that the css part is how to realize the emergence and disappearance of the secondary menu when passing through the first level ul li. The train of thought is:

1. First, set the display attribute of the secondary menu to none to make it disappear.

ul li ul{
            position:absolute;
            /*Absolute positioning is positioned relative to the upper left corner of the browser*/
            left:0px;
            top:40px;
            display: none;
        }

2. Setting the attributes of suspended hover is in the < li > label of the first layer, but the application of the final effect is in the < UL > label of the second layer.

 ul li:hover ul{
            display:block;
        }

Implementing drop-down menu with JavaScript

The code in the html section is similar to that above, but onmouseover and onmouseout events are added.

<div id="nav">
     <ul>
         <li ><a href="#">home page</a></li>
         <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">Learning Center</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>

        </li>
        <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">Course Hall</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>


        </li>
        <li><a href="#">Classic case</a></li>
        <li><a href="#">About us</a></li>


    </ul>

</div> 

You also need to add a piece of javascript code to implement it

 <script type="text/javascript">

        function showsubmenu(li){
   //li is the parameter that the function is going to get in, and the parameter that comes in here is this. This represents the current li tag
            var submenu = li.getElementsByTagName("ul")[0];
   // Because the method of li is used, the ul of the secondary menu is obtained, and the array is obtained.
            submenu.style.display = "block";
   //Using javascript to display attributes in the table style
        }

        function hidesubmenu(li) {
            var submenu = li.getElementsByTagName("ul")[0];
            submenu.style.display = "none";
        }

    </script>

Implementing drop-down menu with jQuery

Before using jquery, you first need to refer to jquery's library file. Here, I have downloaded the local files, so just refer to them directly.

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

In addition, you can also introduce library files by referring to google or Baidu's CDN, which can also shorten the page loading time.
For example: jQuery's cdn

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
</script>

Or google's CDN address

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript">
</script>

Similarly, the HTML part of the code is not particularly different, but on the original basis, add a class= "navmenu" attribute to the < li > tag of the first layer, in order to obtain elements.

<div id="nav">
    <ul>
        <li ><a href="#">home page</a></li>
        <li  class="navmenu" ><a href="#">Learning Center</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>

        </li>
        <li class="navmenu" ><a href="#">Course Hall</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>


        </li>
        <li><a href="#">Classic case</a></li>
        <li><a href="#">About us</a></li>


    </ul>

</div>

The following jQuery code is:

<script type="text/javascript">
        $(function(){
            $(".navmenu").mouseover(function(){
                //Mouse time in jquery is mouseover and mouseout
                //In HTML DOM, onmouseover and onmouseout
                $(this).children("ul").show();
  //this represents the current li tag, so to get the secondary menu, we need to use the children method to get the child tag labeled ul. It is implemented by calling show () method.
            });
        });



        $(document).ready(function(){
            $(".navmenu").mouseout(function(){
                $(this).children("ul").hide();
            });
        });


    </script>

Be careful:
Mouse times in jquery are mouseover and mouseout, while in HTML DOM are onmouseover and onmouseout.