CSS Dropdown Transitions

Question

I'm a little bit lost on how to animate my dropdown menu with CSS only. Can you guys light me up here?

I've tried

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

but I can't hit the note where how to exactly do it. The sub-menu shows up but instantly without any transitions. Any help will be great.

.dropbtn {
  background-color: inherit;
  color: inherit;
  padding: inherit;
  font-size: inherit;
}

.dropdown {
  position: relative;
  display: inline-block;
  font-size: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  height: 100px;     
}

.dropdown-content a {
  color: black;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
  background-color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  height: 200px;
}

<ul>
  <li class="dropdown">
    <a href="javascript:" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Menu 1</a>
      <a href="#">Menu 2</a>
      <a href="#">Menu 3</a>
    </div>
  </li> 
</ul>

Sarah Groß · Accepted Answer · 2019-04-12 23:27:09Z

The display property cannot be animated, because it either is one value, or it isn't, there's nothing in between. You rather want to transition the element's opacity property, by setting it to 0 by default and to 1 on hover, removing the display: none;. In addition to that, use pointer-events: none to prevent the invisible .dropdown-content element from intercepting any mouse events like hover or click, and set it to pointer-events: all when the parent element is hovered.

.dropbtn {
  background-color: inherit;
  color: inherit;
  padding: inherit;
  font-size: inherit;
}

.dropdown {
  position: relative;
  display: inline-block;
  font-size: inherit;
}

.dropdown-content {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background-color: white;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  height: 100px;     
}

.dropdown-content a {
  color: black;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
  background-color: white;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  height: 200px;
  pointer-events: all;
}

<ul>
 <li class="dropdown">
      <a href="javascript:" class="dropbtn">Dropdown</a>
           <div class="dropdown-content">
               <a href="#">Menu 1</a>
               <a href="#">Menu 2</a>
               <a href="#">Menu 3</a>
          </div>
  </li>
</ul>

Collectives™ on Stack Overflow

CSS Dropdown Transitions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related