Dropdown menu transition on CSS

Question

I am trying to add dropdown transition for the menu I am working on, but it seems that I have no idea what I am doing wrong. Where is my mistake or what i have to add for transition dropdown menu? Here is my CSS and HTML code.

.nav li a {
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}

ul {
  float: left;
  padding: 0px;
  list-style: none;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: #F05050;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  margin-right: 2px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  position: relative;
  z-index: 1;
  background-color: #C6AEF0;
}

ul li:hover ul {
  position: relative;
  z-index: 1;
}

ul li ul li {
  opacity: 0.9;
  display: none;
}

ul li:hover ul li {
  display: block;
}

<ul class="nav">
  <li><a>Home</a></li>
  <li><a>News</a></li>
  <li><a>Czech Republic</a>
    <ul>
      <li><a>Facts and figures</a></li>
      <li><a>Area</a></li>
      <li><a>Climate</a></li>
    </ul>
  </li>
  <li><a>Study</a>
    <ul>
      <li><a>How to apply</a></li>
      <li><a>Programmes</a></li>
      <li><a>Scholarships</a></li>
      <li><a>Tuition fees</a></li>
    </ul>
  </li>
  <li><a>Living</a>
    <ul>
      <li><a>Arrival</a></li>
      <li><a>Living costs</a></li>
      <li><a>Work</a></li>
    </ul>
  </li>
  <li><a>Contact</a></li>
</ul><br><br>

Possible duplicate of [Transitions on the display: property](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — Temani Afif, Dec 23 '17 at 09:58
Change `display: none` to `visibility: hidden` and `display: block` to `visibility: visible` solve your problem. — Pedram, Dec 23 '17 at 10:02

Temani Afif · Accepted Answer · 2017-12-23T10:36:31.503

First you are applying the transition to only a element and then you cannot do transition with display property, You should animate another property instead.

Example using max-height:

.nav li a {
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}

ul {
  float: left;
  padding: 0px;
  list-style: none;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: #F05050;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  margin-right: 2px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  position: relative;
  z-index: 1;
  background-color: #C6AEF0;
}

ul li:hover ul {
  position: relative;
  z-index: 1;
}

ul li ul {
  max-height:0px;
  overflow:hidden;
  transition:0.5s;
}

ul li:hover ul {
  max-height:300px;
}

<ul class="nav">
  <li><a>Home</a></li>
  <li><a>News</a></li>
  <li><a>Czech Republic</a>
    <ul>
      <li><a>Facts and figures</a></li>
      <li><a>Area</a></li>
      <li><a>Climate</a></li>
    </ul>
  </li>
  <li><a>Study</a>
    <ul>
      <li><a>How to apply</a></li>
      <li><a>Programmes</a></li>
      <li><a>Scholarships</a></li>
      <li><a>Tuition fees</a></li>
    </ul>
  </li>
  <li><a>Living</a>
    <ul>
      <li><a>Arrival</a></li>
      <li><a>Living costs</a></li>
      <li><a>Work</a></li>
    </ul>
  </li>
  <li><a>Contact</a></li>
</ul><br><br>

Some usefull links to get more ideas:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

https://www.w3.org/TR/css-transitions-1/#animatable-properties

Transitions on the display: property

How can I transition height: 0; to height: auto; using CSS?

Dropdown menu transition on CSS

1 Answers1