1. 问题背景与挑战
在构建纯css下拉菜单时，一个常见的需求是当鼠标悬停在主菜单项上并展开下拉菜单后，即使鼠标移动到下拉菜单区域，主菜单项上的特定动画效果（例如下划线展开）也能保持激活状态，而不是立即重置。通常，当动画效果绑定到主菜单项的:hover伪类上时，一旦鼠标离开该主菜单项（例如移入其下方的下拉菜单），:hover状态就会失效，导致动画效果回滚。
本教程将聚焦于一个具体的场景：一个带有下划线展开动画的菜单按钮，当其对应的下拉菜单打开时，如何确保这条下划线动画始终保持在完全展开的状态，直到鼠标完全离开整个菜单区域。
2. 问题分析：:hover状态的局限性
原始的HTML结构中，主菜单项的链接（<a>标签）带有.line-anim类，其下划线动画通过a.line-anim:hover:after实现。下拉菜单（.dropdown-menu）是包裹主菜单项的列表项（<li>标签，带有.dropdown-menu-hook类）的子元素。
<li class="dropdown-menu-hook"> <a href="#" class="line-anim">TESTIMONIALS</a> <div class="dropdown-menu">...</div> </li>
当鼠标悬停在<a>标签上时，a:hover生效，下划线动画（width: 100%）开始。然而，一旦鼠标从<a>标签移开并进入其兄弟元素.dropdown-menu时，<a>标签的:hover状态随即失效。由于.line-anim:after的width: 100%只在a:hover时应用，动画便会回滚到初始的width: 0状态，这与我们期望的“动画保持”效果相悖。
为了实现动画保持，我们需要找到一种方式，让下划线动画的激活状态不仅依赖于<a>标签自身的悬停，还要依赖于包含整个菜单项及其下拉菜单的父元素（即<li>.dropdown-menu-hook）的悬停状态。
立即学习“前端免费学习笔记（深入）”；
3. 解决方案：利用父元素的:hover状态
解决此问题的关键在于利用CSS的父元素:hover选择器。我们可以通过检测包裹主菜单项和下拉菜单的<li>元素（即.dropdown-menu-hook）是否处于悬停状态来控制<a>标签的下划线动画。
当鼠标悬停在.dropdown-menu-hook上时，无论鼠标是停留在<a>标签上，还是已经移动到其子元素.dropdown-menu中，.dropdown-menu-hook:hover状态都将保持激活。利用这一点，我们可以编写一个CSS规则，在.dropdown-menu-hook悬停时强制<a>标签的下划线保持展开状态。
核心CSS规则如下：
.dropdown-menu-hook:hover > .line-anim:after {
width: 100%;
}这条规则的含义是：当带有.dropdown-menu-hook类的<li>元素被鼠标悬停时，找到其直接子元素中带有.line-anim类的<a>元素，并将其:after伪元素的width设置为100%。这样，只要鼠标在整个<li>区域内（包括主菜单项和下拉菜单），下划线动画就会保持展开。
4. 完整的代码示例
以下是实现此效果所需的完整HTML和CSS代码。
HTML 结构 (index.html)
<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>CSS 样式 (style.css)
/* Main Structure Styling */
.header {
width: 100%;
}
.header ul {
display: flex;
gap: 20px;
justify-content: center; /* Corrected for flexbox */
}
.header ul li {
padding: 10px;
}
a {
text-decoration: none;
color: #000;
font-size: 20px;
}
li {
list-style: none;
}
/* 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; /* Adjust based on your header/li height */
left: 0;
visibility: hidden;
pointer-events: none; /* Initially prevent interaction */
opacity: 0;
color: #000;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
}
.items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.item1,
.item2,
.item3,
.item4 {
line-height: 1.2;
color:#000;
font-weight: 500;
padding: 10px;
transition: .3s;
}
.dropdown-menu-hook:hover > .dropdown-menu {
visibility: visible;
pointer-events: all; /* Allow interaction when visible */
opacity: .9;
}
.dropdown-menu {
transition: opacity .5s, visibility .5s; /* Add transition for visibility */
}
/* Line Animation */
.line-anim {
position: relative;
width: fit-content;
display: inline-block; /* Ensure width: fit-content works as expected */
}
.line-anim:after {
content: "";
background-color: #000;
height: 1px;
width: 0;
left: 0px;
top: -5px; /* Adjust position as needed */
transition: 0.4s ease-out;
position: absolute;
}
.line-anim:hover:after {
width: 100%;
}
/* 核心解决方案：当父级li悬停时，保持下划线动画 */
.dropdown-menu-hook:hover > .line-anim:after {
width: 100%;
}代码说明:
- justify-content: center;: 修正了.header ul的Flexbox布局属性，justify-items主要用于Grid布局，Flexbox中应使用justify-content来水平居中子项。
- pointer-events: none;: 在.dropdown-menu初始状态下设置pointer-events: none;可以防止在
