mootools

References to Documentation

1. Native/Element.js#$$
2. Native/Array.js#Array.each
3. Effects/Fx-Styles.js#Fx.Styles
4. Element/Element-Event.js#Element.addEvent
5. Effects/Fx-Style.js#Fx.Style.start

var list = $$('#idList li');
list.each(function(element) {
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			'margin-left': 5,
			'background-color': '#666',
			color: '#ff8'
		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'margin-left': 0,
			'background-color': '#333',
			'color': '#888'
		});
	});
 
});

<h3>The always requested hover transition</h3>
<ul id="idList">
	<li>option 1</li>
	<li>option 2</li>
	<li>option 3</li>
	<li>option 4</li>
	<li>option 5</li>
	<li>option 6</li>
	<li>option 7</li>
	<li>option 8</li>
	<li>option 9</li>
	<li>option A</li>
	<li>option B</li>
	<li>option C</li>
	<li>option D</li>
	<li>option E</li>
	<li>option F</li>
</ul>

#idList {
	margin: 0;
	padding: 0;
}
 
#idList li {
	display: block;
	margin: 0;
	padding: 4px;
	width: 120px;
	background: #333;
	color: #888;
}