Как сделать плавный выезд изображения при наведении курсора?

Добрый день! Помогите пожалуйста вот с чем смотрите у меня есть горизонтальное меню и его ячейки имеют фон который по умолчанию скрыт а при наведении курсора фон меняет положение и появляется. Реализованно это так:

.sf-menu li {
background: url(../img/nav-hover-bg.png) no-repeat center -5px;
position: relative;
float: left;
}

.sf-menu li:hover{
background-position:center 0;
}

И получается вот так



И всебы хорошо но мне надо сделать так чтобы оно плавно выезжало сверху как вот на этом сайте http://themeforest.net/item/multishop-prestashop-theme/full_screen_preview/3131531?ref=vladeta

Подскажите как это сделать?

Да верхняя полоска с треугольником она сделана изображением и хотелосьбы чтобы плавно выезжая появлялась. Внизу есть ссылка с сайтом на котором реализовано так как мне охота.