Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    If you remove display: none (and also block), it works as desired:

    .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 {
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search