使用JavaScript+css制作一个下拉菜单

html:

    <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">下拉菜单</button>
        <div id="myDropdown" class="dropdown-content">
            <input type="text" placeholder="Search.." class="myInput">
            <a href="#about">靓仔</a>
            <a href="#support">靓女</a>
            <a href="#base">唱跳</a>
            <a href="#blog">Rap</a>
            <a href="#contact">篮球</a>
            <a href="#custom">鲲鲲</a>
            <a href="#tools">两年半</a>
        </div>
    </div>

css

 <style>
        body {
            background-color: #E6E6FA;
        }

        /* 下拉菜单按钮 */
        .dropbtn {
            background-color: #31c27c;
            color: #fff;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 鼠标移动到下拉菜单按钮的样式 */
        .dropbtn:hover,
        .dropbtn:focus {
            background-color: var(--jjext-color-brand);
        }

        /* 搜索框 */
        .myInput {
            box-sizing: border-box;
            background-image: linear-gradient(236deg, #74ebd5, #acb6e5);
            background-repeat: no-repeat;
            font-size: 16px;
            padding: 14px 20px 12px 45px;
            border: none;
            border: 1px solid #ddd;
        }

        /* 搜索框获取焦点的样式 */
        .myInput:focus {
            outline: 3px solid #ddd;
        }

        /* 定位下拉菜单 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 默认显示下拉菜单内容 */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #fff;
            min-width: 230px;
            border: 1px solid #ddd;
            z-index: 1;
        }

        /* 下拉菜单链接样式 */
        .dropdown-content a {
            color: #000;
            padding: 12px 16px;
            text-decoration: none;
            /* 块元素独占一行 */
            display: block;
        }

        /* 鼠标移动到链接上的样式 */
        .dropdown-content a:hover {
            background-color: #eee;
        }
    </style>

js:

    <script>
        // 显示隐藏
        const dropdownContent = document.querySelector('.dropdown-content');
        function myFunction() {
            if (dropdownContent.style.display == 'block') {
                dropdownContent.style.display = 'none';
            } else {
                dropdownContent.style.display = 'block';
            }
        }
    </script>

仙路崎岖，磨难并不可怕，坚持终成正果！