1-下拉菜单的做法

css部分

<style>
    * {
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    ul>li {
        list-style: none;
    }

    .nav>li {
        width: 40px;
        float: left;
    }

    .nav>li>a:hover {
        background-color: blanchedalmond;
    }

    .nav>li ul {
        display: none;
    }

    .nav li ul li a:hover {
        background-color: blanchedalmond;
    }
</style>

html部分

<ul class="nav">
    <li>
        <a href="">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li>
        <a href="">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li>
        <a href="">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li>
        <a href="">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li>
        <a href="">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
</ul>

js部分：方法1：dom实现

// 1.获取元素
const nav=document.querySelector('.nav');
const lis=nav.children;//得到4个li
console.log(lis);
// 2.循环注册事件
for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('mouseenter',function() {
        // console.log(lis[i]);//li
        // console.log(lis[i].children[1]); //li ul
        this.children[1].style.display='block';
    })
    lis[i].addEventListener('mouseleave',function() {
        this.children[1].style.display='none';
    })
}

方法2：jqury实现

// 思路：鼠标经过li，让li的第二个孩子显示出现就行了
$(function () {
    // 鼠标经过li 这个li必须是亲儿子
    $('.nav>li').mouseenter(function () {
        // $(this)  jQuery中的当前元素
        $(this).children('ul').show();
    })
    $('.nav>li').mouseleave(function () {
        $(this).children('ul').hide();
    })
})