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

Я использую CSSdisplay скрыть и показать навигацию второго уровня… но толькоdisplay: none а такжеdisplay: block на:hover немного не сексуально ...ease было бы здорово (как-webkit-transition: display 300ms ease-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>