Pure CSS - How to keep menu button animation ON, while the dropdown menu is opened-CodePudding

I have done this simple dropdown menu purely in CSS and I would like to avoid JS if possible to keep thing simple. So, I would like to keep this animated line width: 100%; when the dropdown menu is opened. At the moment when I move the mouse over the menu animations returns to initial width:0; state.

This works ok when .line-anim class is moved over to <li> element, so next to .dropdown-menu-hook class, but this is not what I want, well the effect is exactly what I want but I would like to keep the animated line within the <a> tag (TESTIMONIALS tab)

/* Main Structure Styling */
.header {
    width: 100%;
}
.header ul {
    display: flex;
    gap: 20px;
    justify-items:center;
}
.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;
    left: 0;
    visibility: hidden;
    pointer-events: all;
    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;
    opacity: .9;
}
.dropdown-menu {
    transition: opacity .5s;
}


/* Line Animation */
.line-anim {
    position: relative;
    width: fit-content;
}
.line-anim:after {
    content: "";
    background-color: #000;
    height: 1px;
    width: 0;
    left: 0px;
    top: -5px;
    transition: 0.4s ease-out;
    position: absolute;
}
.line-anim:hover:after {
    width: 100%;
}

a:hover > .line-anim {
  display: block;
}

<nav >
    <ul>
        <li><a href="#" >ABOUT</a></li>
        <li >
          <a href="#" >TESTIMONIALS</a> 
            <div >
                <div >
                    <a  href="#">Item 1</a>
                    <a  href="#">Item 2</a>
                    <a  href="#">Item 3</a>
                    <a  href="#">Item 4</a>
                </div>
            </div>
        </li>
        <li ><a href="#" >CONTACT</a></li>
    </ul>
</nav>

I've seen many examples here but without animation, this is easy to make the line 100% width when the menu is opened like this:

.line-anim:after {
    width: 100%!important;
    transition: all .9s;
}

But I would like the transition to be visible, then when the line width is 100% I would like it to stay like this until the mouse is out of the dropdown menu.

Below example shows the effect I'm looking for but it only works when the line is moved from the <a> tag to the <li> tag and this is not what I want :( Is there any way to achieve this without JS please?

/* Main Structure Styling */
.header {
    width: 100%;
}
.header ul {
    display: flex;
    gap: 20px;
    justify-items:center;
}
.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;
    left: 0;
    visibility: hidden;
    pointer-events: all;
    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;
    opacity: .9;
}
.dropdown-menu {
    transition: opacity .5s;
}


/* Line Animation */
.line-anim {
    position: relative;
    width: fit-content;
}
.line-anim:after {
    content: "";
    background-color: #000;
    height: 1px;
    width: 0;
    left: 0px;
    top: -5px;
    transition: 0.4s ease-out;
    position: absolute;
}
.line-anim:hover:after {
    width: 100%;
}

a:hover > .line-anim {
  display: block;
}

<nav >
    <ul>
        <li><a href="#" >ABOUT</a></li>
        <li >
          <a href="#" >TESTIMONIALS</a> 
            <div >
                <div >
                    <a  href="#">Item 1</a>
                    <a  href="#">Item 2</a>
                    <a  href="#">Item 3</a>
                    <a  href="#">Item 4</a>
                </div>
            </div>
        </li>
        <li ><a href="#" >CONTACT</a></li>
    </ul>
</nav>

CodePudding user response：

Try

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

It's not a good idea, to show menus only on hover. You could get some problems on touch devices, so active menus or some with js-toggled classes are a good choice.