Realizing tab switching with foreach and ES6

effect :

html Code :

  <ul class="nav">
        <!-- <li> <a href=""> front end </a> <ul class="select"> <li> Employment class </li> <li> The high-quality goods </li> <li> College welfare </li> </ul> </li> <li> <a href="">Python</a> </li> <li> <a href="">JavaEE</a> </li> -->
    </ul>

css Code ：

        * {
    
            margin: 0;
            padding: 0;
        }
        
        a {
    
            color: black;
            text-decoration: none;
        }
        
        li {
    
            width: 70px;
            list-style: none;
        }
        
        .nav {
    
            text-decoration: none;
            list-style: none;
        }
        
        .nav>li {
    
            background-color: lightsteelblue;
            padding: 10px 15px;
            text-align: center;
            float: left;
        }

js Code ：

 <script src="../ Stage four jquery/jquery Programming /jquery.min.js"></script>
     <script>
        var arr1 = [' front end ', 'Python', 'JavaEE'];
        var arr2 = [' Employment class ', ' The high-quality goods ', ' College welfare '];
        var nava = ``;
        var naul = ``;
        arr1.forEach(function(item) {
    
            console.log(item);
            nava += `<li><a href="">${
      item}</a><ul class="select"></ul></li> `;
            $(".nav").html(nava);

        });

        arr2.forEach(function(item) {
    
            console.log(item);
            naul += `<li>${
      item}</li>`;
            $(".select").html(naul);
        });


        $(".nav>li").children("ul").hide();


        $(".nav>li").mouseleave(function() {
    
            $(this).children("ul").hide();
        });

        $(".nav>li").mouseover(function() {
    
            $(this).children("ul").show();

        });
    </script>