Hi, ich möchte ein Menü machen, dass wenn man es hovert, bei <li> den Hintergrund-Gradient wechselt. Mit CSS und

HTML-Code:

.navi li:hover

ist das ja kein Problem, aber ich möchte einen fade-Effekt machen. Wie es bei Bildern geht weiss ich, aber wie sieht es hier mit Gradients aus?

Mein Quelltext:

HTML-Code:

<div class="navi" id="navi">



<ul>
<li><a href="?s=home">Home</a></li>
<li><a href="?s=infos">Infos</a></li>
<li><a href="?s=tuts">Tutorials</a></li>
<li><a href="?s=testberichte">Testberichte</a></li>
<li><a href="?s=downloads">Downloads</a></li>
<li><a href="?s=interactive">Interaktiv</a></li>
<li><a href="?s=settings">Settings</a></li>
<li><a href="?s=more">Mehr</a></li>

</ul>

</div>

Und CSS:

HTML-Code:

.navi ul{
	list-style-type: none;

	}
	.navi li{
		float: left;
		
		margin-left: 5px;

		padding: 20px;
		color: white;

		   -moz-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius:5px;




	}
	
		 .navi li:hover{
background-color: #222;

background: -webkit-gradient(linear, top, bottom, from(#000), to(#222));
background: -moz-linear-gradient(top, #000, #222);
background: -o-linear-gradient(top, #000, #222);
background: -ms-linear-gradient(top, #000, #222);
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#00000000, endColorstr=#22222222);
	}

Danke für Hilfe

PS: jQuery wäre mir auch recht, aber wegen kompatibilität fände ich css3 besser...

Dann könnt dich das hier vielleicht interessieren:

http://jowra.com/journal/2007/02/fade-in-effekt-mit-css