利用js實現下拉菜單效果

這個模塊在實際開發中也是經常會用到的,所以讓我們一起學起來把
成果圖展示

鼠標移動到某一個模塊上就會顯示下拉菜單,在後續的開發中自己可以根據實際情況添加各種樣式和鏈接,我這裏只是做了基礎的功能配置

代碼展示

-------css-------
 <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .nav{
            text-align: center;
            line-height: 50px;
            position: relative;
            margin: 100px auto;
            height: 50px;
            width: 306px;
            border: 1px solid gray;
        }
        .nav li  {
            width: 100px;
            border: 1px solid gray;
            float: left;
        }
        .nav ul{
            display:none;
        }
        .nav ul li {
            margin-left: -1px;
            border-left: 1px solid goldenrod;
            border-right: 1px solid goldenrod;
            border-bottom: 1px solid goldenrod;
        }
        .nav ul li:hover{
            background-color: darkgoldenrod ;
        }
    </style>
------------------html----------
    <ul class="nav">
        <li>
            <a href="">手機</a>
            <ul>
                <li><a href="">華爲</a></li>
                <li><a href="">iPhone</a></li>
                <li><a href="">oppo</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部分

   <script>
        var nav = document.querySelector(".nav");
        var lis = nav.children;  //獲取3個li
        for(var i = 0; i < lis.length; i++){
            lis[i].onmouseover = function(){
              //這裏的this指向lis.[]
                this.children[1].style.display = "block";
            }
            lis[i].onmouseout = function(){
                this.children[1].style.display = "none";
            }
        }
         
    </script>

後續有什麼問題 歡迎大家留言,一起學js 一起進步