Помогите с меню

[colro 1]

Помогите плиз, хотелось бы что бы как на картинке, при наведении..

 

 <div class="nav-menu">
        <a href="/katalog/"><i class="icon-1"></i><span>Каталог</span></a>
        <a href="/news/"><i class="icon-2"></i><span>Новости</span></a>
        <a href="/afisha/"><i class="icon-3"></i><span>Афиша</span></a>
        <a href="/afi/"><i class="icon-30"></i><span>afi </span></a>
        <a href="/katalog/taksi/"><i class="icon-9"></i><span>Такси</span></a>
        <a href="/katalog/cafe/"><i class="icon-10"></i><span>Кафе, рестораны</span></a>
        <a href="/katalog/razvlecheniya-i-otdyh/"><i class="icon-11"></i><span>Развлечения</span></a>
        <a href="/katalog/shops/"><i class="icon-12"></i><span>Магазины</span></a>
        <a href="/katalog/shops/"><i class="icon-12"></i><span>.</span></a> 
        <a href="/katalog/sport/"><i class="icon-21"></i><span>Спорт</span></a>
    </div>

header .nav-menu{position:relative;display:block;vertical-align:top;height:50px;width:1160px}
header .nav-menu a{color:#333;font-size:14px;text-decoration:none;display:block;float:left;padding:16px 8px 0;height:34px}
header .nav-menu a:first-child{margin-left:10px}
header .nav-menu a:hover{background:#09c;color:#FFF}
header .nav-menu a i{float:left;font-size:22px;line-height:25px;padding-right:5px;margin-top:-4px}
header .nav-menu a .icon-1{font-size:25px}

 

[colro 1]

никто не может помочь?

[Adre 1]

Вы бы дали лучше ссылку на сайт. А то, очень сложно по "выдранной" информации что-то сказать. Что-то же унаследуется из предыдущего кода.