纯CSS实现下拉菜单按钮动画保持：鼠标移出后下划线不消失的技巧

<li class="dropdown-menu-hook">
  <a href="#" class="line-anim">TESTIMONIALS</a> 
  <div class="dropdown-menu">...</div>
</li>

.dropdown-menu-hook:hover > .line-anim:after {
    width: 100%;
}

<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>

/* 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%;
}