html怎么制作下拉菜单？下拉菜单实现教程-html教程-PHP中文网

html怎么制作下拉菜单？下拉菜单实现教程

冰火之心

发布： 2025-06-17 21:39:01

原创

1115人浏览过

实现网页下拉菜单需结合html、css和可选js。1. html结构使用嵌套的<ul>和<li>定义主菜单与子菜单；2. css设置submenu默认隐藏，通过hover触发显示，并用position定位；3. 可选添加js实现点击展开功能，注意避免hover与click冲突；4. 注意z-index层级控制、过渡动画优化及移动端适配等细节问题。

html怎么制作下拉菜单？下拉菜单实现教程

下拉菜单是网页设计中常见的交互元素，尤其在导航栏中非常实用。实现一个基本的 HTML 下拉菜单其实不难，主要是结合 HTML、CSS 和少量 JavaScript（可选）来完成。

基本结构：HTML 部分

首先，我们要用 HTML 创建菜单的基本结构。通常使用无序列表 <ul> 和嵌套的 <li> 来表示主菜单和子菜单项。

<ul class="dropdown-menu">
  <li><a href="#">首页</a></li>
  <li>
    <a href="#">产品</a>
    <ul class="submenu">
      <li><a href="#">产品一</a></li>
      <li><a href="#">产品二</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
</ul>

登录后复制

这个结构清晰地表达了主菜单项和子菜单的关系。接下来我们用 CSS 控制显示效果。

立即学习“前端免费学习笔记（深入）”；

样式控制：CSS 实现下拉效果

关键在于隐藏子菜单，并在鼠标悬停时显示它。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

.dropdown-menu {
  list-style: none;
  padding: 0;
}

.dropdown-menu > li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  min-width: 120px;
  z-index: 10;
}

.dropdown-menu > li:hover .submenu {
  display: block;
}

登录后复制

上面的 CSS 中：

position: relative 是为了定位子菜单；
.submenu 默认隐藏；
当鼠标悬停在父级 <li> 上时，子菜单显示出来。

这样就能实现一个简单的鼠标悬停下拉菜单了。

可选增强：添加点击展开功能（JavaScript）

如果你希望在移动端或者点击触发时再展开菜单，可以加一点 JS 控制。

document.querySelectorAll('.dropdown-menu > li').forEach(item => {
  item.addEventListener('click', function(e) {
    const submenu = this.querySelector('.submenu');
    if (submenu) {
      e.preventDefault();
      submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
    }
  });
});

登录后复制

这段代码的意思是：当用户点击菜单项时，如果有子菜单就切换它的显示状态。这样在移动端也能操作了。