How to add transition in drop-down menu?

Question

.topmenu-header ul {
  position: absolute;
  list-style-type: none;
  width: 100%;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul li {
  cursor: pointer;
  float: left;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: relative;
  background: red;
  padding: 16px;
  color: white;
  transition: all 5s ease 0s;
}

.topmenu-header .dropdown {
  top: 100%;
  left: inherit;
  display: none;
}

.topmenu-header li:hover .dropdown {
  background: pink;
  transition-delay: 0s;
  display: block;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li>SPECIALS
      <div class="dropdown">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

I am trying to add transition on my dropdown hover. But i can't recognize the right place, as where i have to write the code. I want if i hover the menu. the drop down will come up smoothly. It's a mega drop down and come up at quickly on hover. I just wanna make it a little bit slow. So it look awesome.

not it's not exactly answer that i need – Gagandeep Singh Jul 06 '19 at 12:02 — Gagandeep Singh, Jul 06 '19 at 12:02

score 0 · Answer 1 · answered Jul 06 '19 at 12:05

you mainly need to add transition to your submenu class. I have add the code let me know if you have any confusion

.topmenu-header ul {
  position: absolute;
  list-style-type: none;
  width: 100%;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul li {
  cursor: pointer;
  float: left;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: relative;
  background: red;
  padding: 16px;
  color: white;
  transition: all 5s ease 0s;
}

.sub-menu-parent {
  position: relative;
}

.sub-menu {
  background: pink;
  text-align: center;
  display: block;
  visibility: hidden;
  /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s
}

.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
  visibility: visible;
  /* shows sub-menu */
  opacity: 1;
  z-index: 1;
  transition-delay: 0s, 0s, 0.3s;
}

.topmenu-header .dropdown {
  top: 100%;
  left: inherit;
  display: none;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li class="sub-menu-parent">SPECIALS
      <div class="sub-menu">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

score 0 · Answer 2 · answered Jul 06 '19 at 12:09

Transition opacity while changing max-height (but not transitioning that). Please note that I also removed float: left; and instead made the ul a flex container.

.topmenu-header ul {
  position: relative;
  list-style-type: none;
  display: flex;
  background: rgba(255, 0, 0, 1);
  flex-wrap: wrap;
}

.topmenu-header ul li {
  cursor: pointer;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: absolute;
  background: red;
  color: white;
  max-height: 0;
  overflow: hidden;
  transition: opacity .4s ease 0s;
}

.topmenu-header .dropdown {
  left: inherit;
  opacity: 0;
}

.topmenu-header li:hover .dropdown {
  background: pink;
  padding: 16px;
  max-height: 1000px;
  opacity: 1;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li>SPECIALS
      <div class="dropdown">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

score 0 · Answer 3 · answered Jul 06 '19 at 12:14

Not all CSS properties can be animated. Here is the MDN list of properties that can be animated - you will see that display is not on the list, so animating the change from display:hidden to display:block cannot be done.

Look through the above list and decide which property you want to animate, and you will be able to create something that works. In the below example, I just picked the height property and you can see that it animates just fine.

.topmenu-header ul {
  position: absolute;
  list-style-type: none;
  width: 100%;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul li {
  cursor: pointer;
  float: left;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: relative;
  background: red;
  padding: 16px;
  color: white;
  transition: all 1.5s ease 0s;
}

.topmenu-header .dropdown {
  top: 100%;
  left: inherit;
  Xdisplay: none;
  height:0px;
  overflow:hidden;
}

.topmenu-header li:hover .dropdown {
  background: pink;
  transition-delay: 0s;
  xdisplay: block;
  height:50px;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li>SPECIALS
      <div class="dropdown">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

How to add transition in drop-down menu?

3 Answers3