JS(javascript)API案例:网页导航栏的下拉菜单效果如何实现？当鼠标移动到列表项上时出现下拉菜单！

js实现当鼠标移动到列表项上时出现下拉菜单，离开时便隐藏起来。

知识讲解

1. css定位（position）和(显示与隐藏)display灵活运用
2. js知识点mouseover/mouseout运用；熟悉节点操作

效果图

css部分

<style>
        .nav>li {
   
            position: relative;
            width: 35px;
            height: 20px;
            display: block;
            padding: 0 20px;
            float: left;
        }

        .nav>li a {
   
            text-decoration: none;
            color: black;
        }
        .nav>li ul {
   
            display: none;/*先隐藏*/
            position: absolute;
            top: 20px;
            right: 21px;
        }
        li {