在网页导航设计中，为菜单项添加交互式动画，如下划线效果，可以显著提升用户体验。然而，当这些菜单项触发下拉菜单时，一个常见挑战是：如何确保主菜单项的动画效果（例如，下划线展开）在下拉菜单打开并被用户操作时依然保持激活状态，而不是在鼠标移出主菜单项时立即消失。本教程将介绍一种纯css的解决方案，以实现这一需求，避免使用javascript，从而保持代码的简洁性。
我们通常会为菜单项的标签添加:hover伪类来实现下划线动画。例如，当鼠标悬停在标签上时，其::after伪元素的宽度从0%变为100%，形成一个展开的下划线效果。
.line-anim:hover:after {
width: 100%; /* 鼠标悬停时下划线展开 */
}然而，当一个标签位于一个包含下拉菜单的
理想的效果是，只要鼠标停留在整个可交互区域（包括主菜单项及其下拉菜单），主菜单项的下划线动画就应该保持激活状态。
解决这个问题的关键在于，将控制动画激活状态的 :hover 伪类应用到包含整个交互区域的父元素上，即
立即学习“前端免费学习笔记（深入）”；
具体实现步骤如下：
HTML结构保持不变：确保下拉菜单的触发元素（标签）和下拉菜单本身都位于同一个父级
<li class="dropdown-menu-hook">
<a href="#" class="line-anim">TESTIMONIALS</a>
<div class="dropdown-menu">
<!-- 下拉菜单内容 -->
</div>
</li>调整CSS选择器：将控制line-anim下划线展开的:hover规则从a.line-anim:hover:after修改为li.dropdown-menu-hook:hover > a.line-anim:after。
这意味着，只要鼠标悬停在.dropdown-menu-hook这个
以下是整合了解决方案的完整HTML和CSS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Dropdown Menu Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="header">
<ul>
<li><a href="#" class="line-anim">ABOUT</a></li>
<li class="dropdown-menu-hook">
<a href="#" class="line-anim">TESTIMONIALS</a>
<div class="dropdown-menu">
<div class="items">
<a class="item1" href="#">Item 1</a>
<a class="item2" href="#">Item 2</a>
<a class="item3" href="#">Item 3</a>
<a class="item4" href="#">Item 4</a>
</div>
</div>
</li>
<li ><a href="#" class="line-anim">CONTACT</a></li>
</ul>
</nav>
</body>
</html>/* Main Structure Styling */
.header {
width: 100%;
}
.header ul {
display: flex;
gap: 20px;
justify-items:center;
padding: 0; /* 移除默认列表内边距 */
margin: 0; /* 移除默认列表外边距 */
}
.header ul li {
padding: 10px;
list-style: none; /* 移除列表项默认样式 */
}
a {
text-decoration: none;
color: #000;
font-size: 20px;
}
/* Dropdown Menu Styling */
.dropdown-menu-hook {
position: relative;
}
.dropdown-menu {
width: 120px;
height: auto;
background-color: #fff;
border-radius: 10px;
padding: 1rem;
position: absolute;
top: 45.5px; /* 根据实际布局调整 */
left: 0;
visibility: hidden; /* 默认隐藏 */
pointer-events: none; /* 默认不响应事件 */
opacity: 0; /* 默认透明 */
color: #000;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
transition: opacity .5s, visibility .5s; /* 添加过渡效果 */
}
.items {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%; /* 确保内容撑满 */
}
.item1,
.item2,
.item3,
.item4 {
line-height: 1.2;
color:#000;
font-weight: 500;
padding: 10px;
transition: .3s;
width: 100%; /* 确保每个子项宽度一致 */
box-sizing: border-box; /* 包含内边距 */
}
.item1:hover, .item2:hover, .item3:hover, .item4:hover {
background-color: #f0f0f0; /* 子项悬停效果 */
border-radius: 5px;
}
/* 当鼠标悬停在 .dropdown-menu-hook 上时，显示下拉菜单 */
.dropdown-menu-hook:hover > .dropdown-menu {
visibility: visible;
pointer-events: all;
opacity: .9;
}
/* Line Animation Styling */
.line-anim {
position: relative;
width: fit-content; /* 宽度适应内容 */
display: inline-block; /* 确保伪元素定位正确 */
}
.line-anim:after {
content: "";
background-color: #000;
height: 1px;
width: 0; /* 初始宽度为0 */
left: 0px;
bottom: -5px; /* 将下划线调整到文字下方 */
transition: width 0.4s ease-out; /* 宽度过渡动画 */
position: absolute;
}
/* 方案核心：当鼠标悬停在 .dropdown-menu-hook (li) 上时，
其内部的 .line-anim (a) 的 ::after 伪元素宽度变为 100% */
.dropdown-menu-hook:hover > .line-anim:after {
width: 100%;
}
/* 对于非下拉菜单项，直接通过自身的 hover 保持动画 */
li:not(.dropdown-menu-hook) > .line-anim:hover:after {
width: 100%;
}
/* 确保普通的 line-anim 鼠标悬停时也能触发 */
.line-anim:hover:after {
width: 100%;
}代码解析：
以上就是纯CSS：下拉菜单打开时如何保持菜单按钮动画效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
228
收藏
