CSS dropdown menu transition

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. The menu itself appears instantly, ignorning the transition effect. CSS code I use for transition: ``` -webkit-transition: height 0.3s ease-in; -moz-transition: height 0.3s ease-in; -o-transition: height 0.3s ease-in; -ms-transition: height 0.3s ease-in; transition: height 0.3s ease-in; opacity:0; ``` As far as I know I should add it to the `nav ul ul` CSS block, and adding `opacity:1` to `nav ul li:hover > ul` but it does not work. And here's whole code of the menu. HTML ```

Accepted Answer

Your transition doesn't fire, because the `height` of your elements isn't changed during `:hover`, only `display` and `opacity`. To make your elements fade in - you need to change your transition property to `opacity` or `all`.

If you want to transition height - you need to set your element `height` to 0, and then change it on `:hover`.

Be aware though - height transitions work only for specified `height` value, and won't work for something like `height: auto;`. There is a workaround for it, as follows:

```
ul {
    transition: all 0.5s;
    max-height: 0;
}

ul:hover {
    max-height: 200px; //or whatever could be your max-height value - don't overdo it, will be crappy transition.
}
```

CSS dropdown menu transition

Solution

Problem