How do I ease in a drop down with css?

Question

I have a dropdown list that appears when hovering over a list item in a nav. I cant get the drop down to ease in.

Can anyone help me get this ease in transition?

/*style for the list items in the drop down*/

.navDropList .navDropItem {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 5px;
  width: 100%;
  list-style: none;
}


/*styling the div that the list resides in*/

.navDropList .dropTag {
  font-size: 20px;
  color: #d3d3d3;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}


/*styling drop down list and attempting to set paramaters for transition*/

.navDropList {
  width: 100%;
  background-color: #414141;
  padding-top: 10px;
  margin-bottom: 5%;
  padding-left: 0px;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
  text-align: center;
  position: absolute;
  display: none;
  transition: all .3s ease-in;
  height: 0;
}


/*attempting to make transition. Only displays as block, no ease in*/

.navListItem:hover .navDropList {
  display: block;
  height: 250px;
}

<nav>
  <ul class="navList">
    <li class=navListItem><a class="navTag current" href="nehemiahUniversity.html">Home</a></li>
    <li class=navListItem><a class="navTag" href="courses.HTML">Courses</a></li>
    <li class=navListItem><a class="navTag" href="training.html">Training Material</a>

      <ul class="navDropList">
        <li class="navDropItem"><a class="dropTag" href="training.html#productionSection">Production</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#warehouseSection">Warehouse</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#qualitySection">Quality Control</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#blendingSection">Blending</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#officeSection">Office</a></li>
      </ul>

    </li>
    <li class=navListItem><a class="navTag" href="walkthrough.HTML">Walkthrough</a></li>
  </ul>
</nav>

@gunther if i set height of the ul to 0, the list items still show. and if i set its opacity to zero as well, the list items go away and the transition animation works, but now there is a bug where my dropdown displays when i hover over the area where it is transparent, not just when i hover over the nav item. — Nick Johnson, Aug 12 '21 at 18:45
[`display`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) property is not animatable, if you want the menu to fade-in you should use the `opacity` property or the `height` property if you want it to slide down. Deleted my comment by mistake before, adding it again for context. — Gunther, Aug 12 '21 at 18:47

score 0 · Answer 1 · answered Aug 12 '21 at 18:45

Like Gunther just said when he sniped me. :) If you have display: none, the element won't animate.

Apart from opacity, I also added overflow-y: hidden and pointer-events: none. The first one, so the menu item's doesn't appear outside .navDropList, and the second one so that the user can't interact with the items inside .navDropList unless it's visible.

Also, never animate using all, because that loops through all animatable properties, which can make the animation appear janky, depending on what's happening on your page.

/*style for the list items in the drop down*/

.navDropList .navDropItem {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 5px;
  width: 100%;
  list-style: none;
}


/*styling the div that the list resides in*/

.navDropList .dropTag {
  font-size: 20px;
  color: #d3d3d3;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}


/*styling drop down list and attempting to set paramaters for transition*/

.navDropList {
  width: 100%;
  background-color: #414141;
  padding-top: 10px;
  margin-bottom: 5%;
  padding-left: 0px;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
  text-align: center;
  position: absolute;
  height: 0;
  
  transition: height 300ms ease-in, opacity 50ms ease-in;
  opacity: 0;
  overflow-y: hidden;
  pointer-events: none;
}


/*attempting to make transition. Only displays as block, no ease in*/

.navListItem:hover .navDropList {
  height: 250px;
  opacity: 1;
  pointer-events: auto;
}

<nav>
  <ul class="navList">
    <li class=navListItem><a class="navTag current" href="nehemiahUniversity.html">Home</a></li>
    <li class=navListItem><a class="navTag" href="courses.HTML">Courses</a></li>
    <li class=navListItem><a class="navTag" href="training.html">Training Material</a>

      <ul class="navDropList">
        <li class="navDropItem"><a class="dropTag" href="training.html#productionSection">Production</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#warehouseSection">Warehouse</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#qualitySection">Quality Control</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#blendingSection">Blending</a></li>
        <li class="navDropItem"><a class="dropTag" href="training.html#officeSection">Office</a></li>
      </ul>

    </li>
    <li class=navListItem><a class="navTag" href="walkthrough.HTML">Walkthrough</a></li>
  </ul>
</nav>

thank you sir you are a gentleman and a scholar. I changed the ms of the opacity ease-in to 300ms, the same as the height. the transition was smoother. thanks man! — Nick Johnson, Aug 12 '21 at 18:50
That's a very complete answer! Do you know any other ways aside from `pointer-events: none` to fix the hover problem? I'm thinking that since it creates a new stacking context you might be able to do that with negatives `z-index` but i'm not sure about it — Gunther, Aug 12 '21 at 18:50
@Gunther An old trick would be to send it outside of the page with `position: absolute` and `overflow-x: hidden` on the body element. I would honestly go with javascript and generate the content inside a div, like Netflix does when you hover a movie. The "zoomed in" detail view is always the same div, just with different content. — Rickard Elimää, Aug 12 '21 at 21:19

How do I ease in a drop down with css?

1 Answers1