js 下拉菜单

作者：末世修罗发布日期:2025-12-11 浏览:22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 下拉菜单</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>

<h2>JavaScript 下拉菜单示例</h2>

<div class="dropdown">
    <span>鼠标悬停我</span>
    <div class="dropdown-content">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
        <a href="#">链接 3</a>
    </div>
</div>

<script>
    // 这里可以添加 JavaScript 代码来增强下拉菜单的功能，比如点击显示/隐藏等。
    // 目前这个例子是通过 CSS 实现的鼠标悬停效果。
</script>

</body>
</html>

解释说明：

HTML 结构:
- 使用了 div 标签创建了一个下拉菜单的容器，并在其中包含了一个触发元素（span）和一个下拉内容区域（div.dropdown-content）。
CSS 样式:
- .dropdown 类用于定义下拉菜单的容器样式。
- .dropdown-content 类用于定义下拉内容的样式，默认是隐藏的（display: none），当鼠标悬停在 .dropdown 上时，.dropdown-content 会显示出来（display: block）。
- 链接的样式也进行了简单的美化，包括背景色、边距、阴影等。
JavaScript:
- 当前的例子中没有使用 JavaScript 来控制下拉菜单的行为，而是通过纯 CSS 实现了鼠标悬停效果。如果需要更复杂的功能（如点击显示/隐藏），可以在 <script> 标签中添加相应的 JavaScript 代码。

上一篇：js 自动滚动

下一篇：js 下拉框