Search code examples
htmlcsscss-transitions

Why does "transition: max-height 3s;" do nothing?

This is a simple menu in HTML. The CSS should animate the dropdown by transitioning slowly from max-height: 0; to max-height: 200px;

The problem for me is that it jumps immediately to max-height 200px completely ignoring the transition property. On inspection no issues with the transition are shown.

  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    overflow-y: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    max-height: 200px;
  }
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
    <a href="#">Link 10</a>
  </div>
</div>

Solution

  • You need to remove the display:none;

      .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    overflow-y: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    max-height: 200px;
  }
    <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
    <a href="#">Link 10</a>
  </div>
</div>