Меню, как правильно пофиксить наводку?

Question

[Javier Nazari]

Так как я самоучка, то частенько возникают такие проблемы, которые не когда почти не мог решить. Проблема собственно такая, при наводке все уходит в низ (обычно когда я еле еле фиксил, при добавление плавности, все было очень сильно криво), да и картинку не знаю как правильно сделать, что бы вместе со всем выделялась. codepen.io/anon/pen/LEYomE

Answer 1

[lightalex]

#menutop li:hover a {
border-top: 3px solid #92b436;
color: #92b436;
}

#menutop li:hover a i {
background-image: url(i.imgur.com/dr708k1.png);
}

Comments

[lightalex]

Тут важно правильно определить для какого блока будет происходить событие hover

[Javier Nazari]

lightalex: Тоже очень полезная информация для меня, спасибо)

Answer 2

[Александр Таратин]

Ужасный подход

<i style="background-position: 0 -99px; height: 26px; margin-top: 8px;"></i>

Соберите из иконок шрифт и не извращайтесь

Comments

[Javier Nazari]

У меня были и ужаснее)

[Javier Nazari]

А вот за шрифт спасибо, не знал о таком)