Menu met transition background - 100px waar class = active?

[killer4all2]

Goedendag,

Momenteel ben ik bezig met het maken van een website en heb een menu gemaakt waarvan de background omhoog komt met behulp van een transition. Hiervoor heb bij de hover neer gezet dat de background omhoog moet komen en heb daar een transition van 0.4s aan gegeven. Waardoor deze omhoog slide.

Bij met menu heb ik ook een active class gemaakt. Deze .active zegt simpelweg dat de background-position: 0 -100%; moet blijven. Waardoor hij dan aangeklikt staat.

Wat ik nu wil is dat als er over een andere button heen gegaan word moet deze active class ook via een transition naar benede gaan. En als er dan weer van het menu word af gehoverd (out) dan moet hij weer terug omhoog komen.

Ik hoop dat ik een beetje duidelijk ben Volgens mij kan dit wel, maar ik kan nog niet zo goed javascript en weet niet waar ik op moet zoeken voor dit.

Ik hoop dat jullie mij kunnen helpen

Met vriendelijke groet,
Rowan

CODE:

#navigation ul li
{
	list-style: none;
	text-align: center;
	padding:0;
	width:165px;
	height:60px;
	background: url("images/navbg.png") repeat-x;
	background-position:0 -100%;
	float:left;
	-webkit-transition:background 0.4s ease-in;  
	-moz-transition:background 0.4s ease-in;  
	-o-transition:background 0.4s ease-in;  
	transition:background 0.4s ease-in;  
}

#navigation ul li:hover, #navigation ul li.active
{
	background-position:0 0;
	color:FFF;
}