-webkit-transition with display

Есть ли способ использовать -webkit-transition с display ?

Я использую CSS display , чтобы скрыть и показать второй уровень навигации… но только display: none ] и display: block на : hover немного некрасиво… простота была бы отличной (например, -webkit-transition: display 300ms easy-in; )

Я знаю, что это довольно легко сделать с помощью jQuery, но в настоящее время я пытаюсь настроить все с помощью CSS3 (я знаю: не все браузеры поддерживают его, но это не имеет отношения к одному проекту, над которым я сейчас работаю)

вот некоторый код и структура: ( li.menu1 имеет : hover ] с section.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>