js实现下拉菜单栏

当悬浮到水韵事的时候会有一个下拉菜单栏

我们首先要在a标签下面嵌套一个ul、li结合HTML和css来实现下拉菜单栏的基本样式

<li><a href="/shuixunhuan.html" id="caidan" target="_blank">水韵事
                    <ul id="mulu">
                    <li><a href="">行业新闻</a></li>
                <li>
                    <a href="">企业动态</a>
                </li>
                <li>
                    <a href="">新闻资讯</a>
                </li>
                <li><a href="">行业新闻</a></li>
                <li>
                    <a href="">企业动态</a>
                </li>
                <li>
                    <a href="">新闻资讯</a>
                </li>
            </ul>
            </a>
            </li>

#mulu {
    margin-top: 20px;
    width: 100px;
    height: 40px;
    background: lightblue;
    display: none;
    position: relative;
    line-height: 10px;
    z-index: 3;
}

#mulu li {
    width: 100px;
    height: 10px;
    background: white;
}

然后用js鼠标事件来判断当鼠标悬浮在水韵事上面的时候，菜单栏出现；display：block

然后鼠标移出的时候再让他display：none隐藏

let caidan = document.getElementById("caidan");
        let mulu = document.getElementById("mulu");
        caidan.onmouseover = (() => {
            mulu.style.display = "block";
        })
        mulu.onmouseleave = (() => {
            mulu.style.display = "none";
        })

这样一个下拉菜单栏的基本效果就完成了