本文介绍了如何使用纯CSS实现下拉菜单在鼠标悬停时保持显示，以及鼠标移开后隐藏的交互效果。通过利用CSS的:hover伪类，可以避免使用JavaScript，简化代码并提高性能。同时，也讨论了这种方法在键盘可访问性方面的局限性，并提供了相应的注意事项。
使用CSS :hover 伪类实现下拉菜单
实现下拉菜单的一种常见需求是，当鼠标悬停在菜单项上时，下拉菜单显示；当鼠标移开时，下拉菜单隐藏。 使用 JavaScript 可以实现此功能，但使用纯 CSS 可以简化代码并提高性能。
关键在于使用 CSS 的 :hover 伪类。:hover 伪类允许您在鼠标悬停在元素上时应用样式。
以下是如何使用 CSS 实现此效果的步骤：
立即学习“前端免费学习笔记（深入）”；
-
HTML 结构：
HTML 结构需要包含主菜单项和下拉菜单。 下拉菜单应该嵌套在主菜单项中。
<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 伪类可以方便地实现鼠标悬停时显示下拉菜单的效果。 这种方法简单高效，但需要注意键盘可访问性的问题。 在选择实现方式时，需要根据具体的需求和场景进行权衡。
