Edit in JSFiddle

<ul id="list">
    <li><a href="#">Some info</a></li>
    <li><a href="#">Go buy a mac</a></li>
    <li><a href="#">You won&#39;t regret it</a></li>
</ul>

@import"http://viget.com/assets/stylesheets/application.css";
 body {
    margin: 0;
    padding: 0;
}
#list {
    list-style: none;
    width: 400px;
    border-top: 1px solid #eee;
    margin: 35px 0 0;
    float: left;
    position: relative;
}
#list li {
    border-bottom: 1px solid #eee;
    position: relative;
    background: none;
    padding: 0;
    margin: 0;
    float: none;
}
#list li a {
    color: #492b23;
    display: block;
    padding: 10px;
    text-decoration: none;
    border: 0;
    /* IE is the myspace of browsers! */
    position: relative;
    height: 1%;
    /* /IE */
}
#list li a:hover {
    background: #ecf6f5;
    color: #3f5f5a;
}
#list li a span {
    position: absolute;
    left: -35px;
    top: 50%;
    margin: -4px 0 0;
    height: 8px;
    width: 24px;
    background: url(http://www.viget.com/uploads/image/arrow.png) 0 0 no-repeat;
    display: none;
}

//  list animation  
var fadeDuration = 150; //time in milliseconds

$('#list li a').hover(function () {
    $(this).animate({
        paddingLeft: '30px'
    }, fadeDuration);
    $(this).children('span').show().animate({
        left: -5
    }, fadeDuration);
}, function () {
    $(this).animate({
        paddingLeft: '15px'
    }, fadeDuration);
    $(this).children('span').animate({
        left: -35
    }, fadeDuration).fadeOut(fadeDuration);
});