Есть ли способ использовать -webkit-transition
с display
?
Я использую CSS display
, чтобы скрыть и показать второй уровень навигации... но только display: none
и display: block
на :hover
немного не секси... a 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>