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

Question

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

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 class="header">
    <ul>
        <li><a href="#" class="line-anim">ABOUT</a></li>
        <li class="dropdown-menu-hook line-anim">
          <a href="#" class="">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>

zero2579 · Accepted Answer · 2022-06-26 12:15:00Z

1

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.

answered Jun 26, 2022 at 12:15

zero2579

2282 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maryando Over a year ago

Thanks this works perfectly, what is interesting I was trying this before and nothing was working for me, but here all works perfectly. I have surely overcomplicated my CSS so this was not working on my site hahaha. Thanks so much! Regarding menu this is intended for desktop devices only. All mobile devices will have JS toggled full screen overlay menu.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related