Cześć, chcę zrobić (tylko nie wiem, jak), aby moje menu, jak się pokazuje to była taka mała animacja (tzn., żeby się tak powolutku wysuwało). Kombinowałem z transition w CSS, ale nie działało mi to. Proszę o pomoc. Mój obecny kod:

[CSS] pobierz, plaintext 
ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;bottom:100%;padding:0 11px;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
	*display:inline;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:18px Bodega;color:#7e7e7e;cursor:pointer;padding:5px 15px 15px 15px;background-repeat:repeat;background-position:0 0;}
ul#css3menu1 ul li{
	float:none;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;font:18px Bodega;color:#FFC060;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	color:#FFFFFF;background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	color:#FFFFFF;text-shadow: 0 0 0.2em #ffffff;text-decoration:none;}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
		<ul id="css3menu1" class="topmenu">
			<li class="topfirst"><a href="#" style="height:17px;line-height:17px;"><span>asd</span></a>
				<ul>
					<li><a href="#">asdf</a></li>
					<li><a href="#">asdf</a></li>
					<li><a href="#">asdf</a></li>
					<li><a href="#">asdf</a></li>
					<li><a href="#">asdf</a></li>
				</ul>
			</li>
		</ul>
[HTML] pobierz, plaintext 

http://shailan.com/2713/create-a-dropdown-...s3-transitions/

No mam taki kod:

[CSS] pobierz, plaintext 
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
[CSS] pobierz, plaintext 

Gdzie mam go dodać? Próbowałem już do wszystkiego po kolei w CSS i mi nie działa. Menu nie wysuwa się tylko się pokazuje (tak normalnie). Proszę o pomoc, muszę to raz dwa trzy zrobić. Z góry thx

Wyrzuć display:none i ustaw opacity.

Coś takiego kolego?

[CSS] pobierz, plaintext 
ul#css3menu1 ul {
	/*display: none;*/
	opacity: 0;
	-webkit-transition: opacity .1s ease-in-out;
    -moz-transition: opacity .1s ease-in-out;
    -o-transition: opacity .1s ease-in-out;
	position: absolute;
	left: 0;
	bottom: 100%;
	padding: 0 11px;
}
[CSS] pobierz, plaintext 

To nie śmiga, a przy opacity: 1 wszystko jest od razu rozwinięte.

Dodałem jeszcze opacity: 1 dla hovera i chyba działa, zaraz dam znać.

Działa, dzięki za pomoc.

A mam jeszcze jedno pytanie. Można do tego menu dodać jakoś ajax, żeby to poza tym, że tak się fajnie pokazuje, to jeszcze tak płynnie wyjeżdżało?

Koledzy zrobiłem sobie coś takiego:

[JAVASCRIPT] pobierz, plaintext 
	  <script>
$(document).ready(function(){
        $("#css3menu1>li>ul").hide();
        $("ul#menu>li a").mouseover(function(){                     
            $(this).next("ul").slideDown('1000');
            $(this).next("ul").addClass("current_submenu");     
        });
        $(".submenu>li").click(function(){                          
            $(".current_submenu").slideUp('1000');          
        }); 
});
	   </script>
[JAVASCRIPT] pobierz, plaintext 

Jednakże to działa tylko raz. Jak już się wysunie i się schowa to już później jest bez wysuwania (chyba, że odświeżę stronę).



@EDIT: już nie trzeba pomoc. Pozdrawiam.

Och, przepraszam, że jeszcze tak truję.
Napisałem sobie kod:

[JAVASCRIPT] pobierz, plaintext 
	<script type="text/javascript">
		$(document).ready(function(){
			$("#css3menu1>li>ul").hide();
			$("ul#css3menu1>li").hover(function() { $(this).find("ul").slideToggle(1000); });
		});
	</script>
[JAVASCRIPT] pobierz, plaintext 

No i to menu rozwija mi się, ale nie zwija się. I w ogóle czasem się przytnie jakoś dziwnie. Tu są jakieś błędy? A może to inaczej lepiej zrobić?