HTML+CSS+JavaScript實現(xiàn)下拉菜單效果

更新時間：2022年07月04日 09:22:34 作者：@半島鐵盒@

這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了HTML+CSS+JavaScript實現(xiàn)下拉菜單效果的具體代碼，供大家參考，具體內容如下

實現(xiàn)思路：

HTML 方面，導航欄的每個 <li> 元素里面包含 <a> 和 <ul> ，將 <li> 設置為相對定位，將 <ul> 設置為絕對定位，并將 <ul> 的 display 屬性設置為 none 。通過 js 給導航欄的每個 <li> 添加事件監(jiān)聽器，當鼠標覆蓋 <li> 時，令 <ul> 的 display 屬性值為 block；當鼠標離開 <li> 時，令 <ul> 的 display 屬性值為 none；

效果演示：

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜單</title>
    <style>   
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #ffb900;
        }
        a {
            cursor: default;
            text-decoration: none;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 3px;
        }
        li {
            list-style: none;
            cursor: default;
        }
        .container {
            position: absolute;
            top: 30%;
            left:50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 10px 10px rgba(10, 20, 20, .20), 0 0 10px rgba(10, 20, 20, .20);
            font-size: 0;
        }
        .container .nav {
            display: inline-block;
            position: relative;
            width: 150px;
            height: 50px;
            background-color: #505050;
            text-align: center;
            line-height: 50px;
        }
        .container .nav:hover {
            background-color: #3e3e3e;
        }
        .container .nav ul {
            display: none;
            position: absolute;
            top: 50px;
            width: 100%;
            box-shadow: 0 10px 10px rgba(10, 20, 20, .20), 0 0 10px rgba(10, 20, 20, .20);
            background-color: #fff;
            text-align: center;
        }
        .container .nav ul li a {
            display: block;
            color: #505050;
        }
        .container .nav ul li a:hover {
            background-color: #e1e1e1;
        }
    </style>
</head>
<body>
    <ul class="container">
        <li class="nav">
            <a href="#">水果</a>
            <ul>
                <li><a href="#">西瓜</a></li>
                <li><a href="#">香蕉</a></li>
                <li><a href="#">哈密瓜</a></li>
                <li><a href="#">橙子</a></li>
            </ul>
        </li>
        <li class="nav">
            <a href="#">蔬菜</a>
            <ul>
                <li><a href="#">西紅柿</a></li>
                <li><a href="#">土豆</a></li>
                <li><a href="#">小白菜</a></li>
                <li><a href="#">黃花菜</a></li>
            </ul>
        </li>
        <li class="nav">
            <a href="#">酒水</a>
            <ul>
                <li><a href="#">啤酒</a></li>
                <li><a href="#">橙汁</a></li>
                <li><a href="#">可樂</a></li>
                <li><a href="#">雪碧</a></li>
            </ul>
        </li>
        <li class="nav">
            <a href="#">零食</a>
            <ul>
                <li><a href="#">餅干</a></li>
                <li><a href="#">面包</a></li>
                <li><a href="#">辣條</a></li>
                <li><a href="#">沙琪瑪</a></li>
            </ul>
        </li>
    </ul>
    <script>
        let nav = document.querySelectorAll('.nav');
        for(let i=0; i<nav.length; i++) {
            nav[i].addEventListener('mouseover', function() {
                this.children[1].style.display = "block";
            });
            nav[i].addEventListener('mouseout', function() {
                this.children[1].style.display = "none";
            });
        }
    </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: