Height transition not working

Question

i tried putting that code on #subnavlist li but it wont work. Basically i was trying to delay the hover height

 height: 0;
-webkit-transition: height 200ms ease-in;
-moz-transition: height 200ms ease-in;
-o-transition: height 200ms ease-in;
transition: height 200ms ease-in;

Answer 1

* { padding:0; margin:0; }
li { list-style: none: list-type: none; }
li div { max-height:0; overflow:hidden; background: #000; color: #fff;
  transition: all 0.2s ease-in-out;
}
li span { display: block; padding: 4px; font-weight: bold; color: #fff; background: #000;}
li span:hover + div {
    max-height: 400px;
}

<ul>
  <li>
    <span>Something</span>
    <div>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
    </div>
</ul>

Transitions need a defined start and a defined end state. You do not have a defined end height (auto is not defined) so you cannot transition from height:0 to height:auto

Your JSFiddle does not contain any height transitioning code either.

A workaround for you is to use max-height and transition that from 0 to some moderately large value.