CSS3 ile Hover'e Efekt Verebilir Miyiz?

Merhaba arkadaşlar,

soru oldukça basit, aşağıda örnekle açıklayayım birde.

Diyelimki aşağıda ki gibi bir menüye sahibiz

<ul>
	<li><a href="#">Menü 1</a></li>
	<li><a href="#">Menü 2</a>
		<ul>
			<li><a href="#">Alt Menü 1</a></li>
			<li><a href="#">Alt Menü 2</a></li>
			<li><a href="#">Alt Menü 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menü 3</a></li>
	<li><a href="#">Menü 4</a></li>
</ul>

ul içinde ul var gördüğünüz gibi, ilk durumda çocuk ul display none, ve baş li'ye hover yapıldığında alt ul açılıyor, aşağıdaki css'de mevcut

	ul {
		padding: 0;
	}

	ul li {
		display: inline-block;
	}

	ul li ul {
		display: none;
		position: absolute;
		padding: 0;
	}

	ul li:hover ul {
		display: block;
	}

	ul li ul li {
		display: block;
	}

ul açıldığında karşımıza direkt geliyor, ancak CSS 3 ile gelen efektlerle sanki jQuery'de ki slideToggle ya da toggle gibi bir efekt vermemiz mümkün mü?

toggle den kastınız nedir?

Alt menünün pat diye değilde daha güzel bir şekilde açılması.

http://fatihhayrioglu.com/css3-animasyonanimation/ sayfasında keyframe ile alakalı bilgi alabilirsiniz.

ul li:hover ul seçicisine tanımlama yaparsanız çalışacaktır.

Buyrun:

http://codepen.io/toddsynan/full/pJuyx