css3 transition

[Nightmare]

Всем привет. В принципе код:

nav .menu > ul {
            float: left;
            font-size: 12px;
            text-transform: uppercase;
        }
            nav .menu li {
                list-style: none;
                line-height: 25px;
            }

            nav .menu > ul > li {
                float: left;
                position: relative;
                -webkit-transition: all 0.2s linear;
                -moz-transition: all 0.2s linear;
                -ms-transition: all 0.2s linear;
                transition: all 0.2s linear;
            }
             nav .menu > ul > li:hover {
                    background: #f9623e;

                }

Делается анимация фона, все отлично. Но есть второй уровень меню, как мне сделать и его появление так же как и эелемент списка пишу вот такое:

            nav .menu > ul > li > ul {
                position: absolute;
                -webkit-transition: all 0.2s linear;
                -moz-transition: all 0.2s linear;
                -ms-transition: all 0.2s linear;
                transition: all 0.2s linear;
                left: 0;
                top: 100%;
                height: 100px;width: 100px;
                display: none;
            }

            nav .menu > ul > li:hover > ul {
                display: block;
                background: #f9623e;
            }

Но анимации нет. Буду рад помощи

Edited December 28, 2011 by Nightmare

[CharlieCruz]

Привет.

css3 transitions не работает со свойством display. Вот список свойств для которых могут применяться transitions

Попробуйте вместо display:none; -> display:block; использовать height:0; height:100px;