Existe uma maneira de usar-webkit-transition comdisplay?

Estou usando CSSdisplay ocultar e mostrar um nível de navegação no segundo nível… mas apenasdisplay: none edisplay: block em:hover é um pouco sexy ... umease seria ótimo (como-webkit-transition: display 300ms ease-in;)

Eu sei que é bastante fácil fazer isso com jQuery, mas atualmente estou tentando configurar tudo com CSS3 (eu sei: nem todos os navegadores suportam, mas isso é irrelevante para este projeto em que estou trabalhando)

aqui estão alguns códigos e estrutura: (oli.menu1 tem um:hover comsection.nav-menu1 {display: block;})

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>