使用CSS实现鼠标悬停时保持显示的下拉菜单-html教程-PHP中文网

使用CSS实现鼠标悬停时保持显示的下拉菜单

花韻仙語

发布： 2025-09-05 22:18:03

原创

368人浏览过

使用css实现鼠标悬停时保持显示的下拉菜单

本文介绍了如何使用纯CSS实现下拉菜单在鼠标悬停时保持显示，以及鼠标移开后隐藏的交互效果。通过利用CSS的:hover伪类，可以避免使用JavaScript，简化代码并提高性能。同时，也讨论了这种方法在键盘可访问性方面的局限性，并提供了相应的注意事项。

使用CSS :hover 伪类实现下拉菜单

实现下拉菜单的一种常见需求是，当鼠标悬停在菜单项上时，下拉菜单显示；当鼠标移开时，下拉菜单隐藏。使用 JavaScript 可以实现此功能，但使用纯 CSS 可以简化代码并提高性能。

关键在于使用 CSS 的 :hover 伪类。:hover 伪类允许您在鼠标悬停在元素上时应用样式。

以下是如何使用 CSS 实现此效果的步骤：

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

HTML 结构：

HTML 结构需要包含主菜单项和下拉菜单。下拉菜单应该嵌套在主菜单项中。

Copymatic

Cowriter是一款AI写作工具，可以通过为你生成内容来帮助你加快写作速度和激发写作灵感。

查看详情

<nav>
  <h1 class="logo">Logo</h1>
  <ul class="main-menu">
    <li><a href="">Link 1</a></li>
    <li><a href="" id="drop">Link 2</a>
      <ul class="sub-men">
        <li><a href="">Sub-1</a></li>
        <li><a href="">Sub-1</a></li>
        <li><a href="">Sub-1</a></li>
      </ul>
    </li>
    <li><a href="">Link 3</a></li>
  </ul>
</nav>

登录后复制

CSS 样式：

首先，将下拉菜单的 visibility 属性设置为 hidden，使其默认隐藏。
然后，使用 :hover 伪类来改变当鼠标悬停在主菜单项上时，下拉菜单的 visibility 属性为 visible。

.sub-men {
  display: flex;
  flex-direction: column;
  position: absolute;
  list-style: none;
  visibility: hidden;
}

/* makes sub-men visible when its parent is hoverd. */
.main-menu li:hover .sub-men {
  visibility: visible;
}

登录后复制

完整的 CSS 代码如下：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 10vh;
  background-color: aquamarine;
}

.logo {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.main-menu {
  display: flex;
  list-style: none;
  align-items: center;
}

.main-menu>li {
  position: relative;
  height: 10vh;
}

.main-menu>li>a {
  display: flex;
  padding: 0 1rem;
  text-decoration: none;
  background-color: antiquewhite;
  height: 10vh;
  align-items: center;
}

.sub-men {
  display: flex;
  flex-direction: column;
  position: absolute;
  list-style: none;
  visibility: hidden;
}

/* makes sub-men visible when its parent is hoverd. */
.main-menu li:hover .sub-men {
  visibility: visible;
}

.sub-men>li {
  position: relative;
  background-color: aquamarine;
  padding: .5rem 1rem;
  width: 100px;
  text-align: center;
}

.visible {
  visibility: visible;
}

.sub-men>li:hover {
  background-color: aqua;
}

.sub-men>li>a {
  text-decoration: none;
  position: relative;
}

登录后复制

移除 JavaScript 代码：

如果之前使用了 JavaScript 代码来控制下拉菜单的显示和隐藏，现在可以移除它。

// 移除以下代码
document.querySelector('#drop').addEventListener('click', (e) => {
    document.querySelector('.sub-men').classList.toggle('visible');
})

登录后复制

完整代码示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML 5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <nav>
    <h1 class="logo">Logo</h1>
    <ul class="main-menu">
      <li><a href="">Link 1</a></li>
      <li><a href="" id="drop">Link 2</a>
        <ul class="sub-men">
          <li><a href="">Sub-1</a></li>
          <li><a href="">Sub-1</a></li>
          <li><a href="">Sub-1</a></li>
        </ul>
      </li>
      <li><a href="">Link 3</a></li>
    </ul>
  </nav>
</body>

</html>

登录后复制

注意事项

键盘可访问性： 这种纯 CSS 的方法在键盘可访问性方面存在局限性。因为 :hover 伪类只在鼠标悬停时触发，所以使用键盘导航的用户无法访问下拉菜单。如果需要支持键盘导航，则需要使用 JavaScript 来实现。
复杂的交互： 对于更复杂的交互，例如点击菜单项后保持下拉菜单显示，或者需要在菜单外部点击才能关闭菜单，使用 JavaScript 可能更合适。

总结

使用 CSS 的 :hover 伪类可以方便地实现鼠标悬停时显示下拉菜单的效果。这种方法简单高效，但需要注意键盘可访问性的问题。在选择实现方式时，需要根据具体的需求和场景进行权衡。

以上就是使用CSS实现鼠标悬停时保持显示的下拉菜单的详细内容，更多请关注php中文网其它相关文章！