Как сверстать меню?

mark2011 · 2013-05-14T08:56:17.0000000Z

Есть меню. По наведению мышки текст должен поменяться, а на меню должна быть фоновая картинка. Она одна. Делаю так: <div class="menu"> <ul> <li><a href="#">главная</a></li> <li><a href="#">о компании</a></li> <li><a href="#">клиенты</a></li> <li><a href="#">оборудование</a></li> <li><a href="#">зона обслуживания</a></li> <li><a href="#">контакты</a></li> </ul> </div> .menu { width: 984px; height: 45px; background-image: url('menu_bg.png'); } .menu ul { list-style-type: none; margin-left: 23px; } .menu ul li { display: inline-block; margin-right: 34px; text-transform: uppercase; font-family: Arial; font-size: 12px; margin-top: 15px; } .menu ul li a { color: #974a10; width: 150px; } .menu ul li a:hover { color: #fff; background-image: url('menu_hover.png'); width: 128px; height: 55px; padding-top: 25px; padding-bottom: 20px; width: 180px; padding-right: 10px; padding-left: 10px; } Но как-то очень неустойчиво и косячно получается..... есть вариант получше?

341

mark2011

21 мая 2013, 08:40

#11

Chukcha,

Спасибо. Но по сути осталось всё так же.

1. Непонятный разрыв фоновой картинки над пунктом "Зона обслуживания".

2. Отсутствие паддингов, а при их присутствии - "едут" пункты меню вправо.

---------- Добавлено 21.05.2013 в 13:08 ----------

А за что минусовать-то?? Я ничего такого не говорил!

---------- Добавлено 21.05.2013 в 13:10 ----------

vlad00777:
AwesomeDIMM, правильно подсказал. Тс что вам еще надо?
.menu ul li:hover{стили}

Я так делал, результат неудовлетворительный. Поэтому и выставил ссылку на сайт.

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше

Упали позиции сайта в как лучше сделать перелинковку? Вопрос о yandex.ru/redir_warning

Что делать, если ваша email-рассылка попала в спам

Курс биткоина превысил $50 тысяч

Как сверстать меню?