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";
        })

這樣一個下拉菜單欄的基本效果就完成了