JS写一个下拉菜单

• 思路： 当鼠标悬浮在某个主菜单时，子菜单的属性display：从none改为block。 当鼠标离开在某个主菜单时，子菜单的属性display：从block改为none。
• 难点：

1. 主菜单是独立的一个ul-li
2. 子菜单是独立的一个ul-li
3. 获取元素时，可以通过log事先打印查看，是否能够正确获取 例如： var sonMenu = document.querySelector('.son'); // console.log(sonMenu);

• 代码块

css代码：

*{
            margin: 0px;
            padding: 0px;
        }
        body{
            font-size: 14px;
        }
        #nav{
            width: 600px;
            height: 40px;
            background-color: #eee;
            margin: 0 auto;
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 100px;
        }
        ul li ul{
            display: none;
        }
        ul li ul li {
            margin: 2px 0;
            background-color:#eee;
            float: none;
        }
        a{
            text-decoration: none;
            color: #000;
            display: block;
        }
        a:hover{
            color: pink;
            background-color: #666;
        }

html主体：

<div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li  class="father"> 
                <a href="#">课程大厅</a>
                <ul class="son">
                    <li><a href="#">HTML8888888888888</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">Css</a></li>
                </ul>
            </li>
            <li><a href="#">学习中心</a></li>
            <li><a href="#">问与答</a></li>
        </ul>
    </div>

js代码：

var subMenu = document.querySelector('.father');
        subMenu.onmouseover = function(){
            
            sonMenu.style.display = 'block';
        }
        subMenu.onmouseout = function(){
            sonMenu.style.display = 'none';
        }