下拉菜单

案例展示

效果如上图所示，当鼠标经过最上面的内容时出现下拉菜单，鼠标移开则隐藏。当鼠标移动到下拉菜单的选项时该选项背景颜色改变，如下图所示。

核心思想

1. 上方内容用ul和li，每个li内包含超链接a；下拉菜单部分也是用ul和li。
2. 为了能够让每个li都有鼠标经过事件，需要为所有li遍历获取，注册事件。
3. 鼠标经过上方时，下拉菜单显示；鼠标离开上方和下拉菜单时隐藏。

代码

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>
</ul>

css部分

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
        color: black;
    }
    
    .nav {
        display: flex;
        width: 210px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        margin: 100px auto;
    }
    
    .nav>li {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .nav>li>a:hover {
        /* 转换为块级元素的目的是为了鼠标经过时整个a区域变色，而不是文本附近的区域变色 */
        display: block;
        background-color: #ccc;
    }
    
    .nav ul {
        display: none;
        flex: 1;
        border-left: 1px solid orange;
        border-right: 1px solid orange;
    }
    
    .nav ul li {
        border-bottom: 1px solid orange;
    }
    
    .nav ul li a {
        display: block;
        font-size: 12px;
    }
    
    .nav ul li a:hover {
        background-color: rgb(255, 196, 86);
    }
</style>

javascript部分

<script>
    var lis = document.querySelector('.nav').children;
    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.children[1].style.display = 'block';
        }
        lis[i].onmouseout = function() {
            this.children[1].style.display = 'none';
        }
    }
</script>