Как залить пункт меню цветом при наведении?

Question

[Иван Малышев]

Учусь верстке, не могу понять как залить полностью пункт меню другим цветом при наведении? В моем варианте заливается только текст, вокруг все остается как есть.

Пример

Верстальщики, прошу помочь.

Answer 1

[Юрий Лобанов]

jsfiddle.net/jGtJ7/2
Вот пример, я цвет бордера поменял, чтобы нагляднее. Короче, посмотрите пример и сделайте свой также.

Comments

[Юрий Лобанов]

будут вопросы - пишите.

[Иван Малышев]

Спасибо большое, ваш вариант, как раз то что нужно!

Answer 2

[victimofbrainlessness]

jsfiddle.net/jGtJ7/4

немного другое исполнение. отличается от варианта @iiil следующим:
1. вместо float используется inline-block. не то что бы float это плохо, но имеет тенденцию вызывать пролемы в более сложных структурах, и чтобы их вылечить вставлять пустые элементы с clear:both. IE раньше коряво работал с inline-block, но последнии версии поддерживают caniuse.com/inline-block
2. Один недостаток, при работе с inline-block нужно быть осторожнее с whitespace css-tricks.com/fighting-the-space-between-inline-b...
3. самое главное - так как ссылка стала блочным элементом, то пункт меню полностью активная область. в варианте iiil только текст

Comments

[Иван Малышев]

Спасибо! Тоже отличный вариант

[Юрий Лобанов]

Мой вариант - это быстрая переделка варианта автора.

[Иван Малышев]

@iiil именно ваш вариант я использовал у себя, мне он больше по душе

[victimofbrainlessness]

@iiil никто не говорит что плохой.
автор написал, что учится. я всего лишь предложил альтернативный спосовб чВ

[Иван Малышев]

@victimofbrainlessness все верно! Учусь и рад что с помощью вас, ребята могу развиваться. Еще раз спасибо!

Answer 3

[Анна Бакурова]

использование float превосходит inline-block своей кроссбраузерностью. При использование inline-block Вы свои сайты в ie старых не узнаете. А всё же приятно когда кроссбраузеность не оговаривалась но она есть.

Answer 4

[Юрий Лобанов]

jsfiddle.net/jGtJ7/1
вот так

Comments

[Юрий Лобанов]

ну и верстку Вам надо поправить.

[Иван Малышев]

Точно, допустил опечатку, но это не решило вопрос. При наведении заливается другим цветом только текст, а нужно чтобы заливался весь блок. И что значит поправить верстку? Что не так?

[Юрий Лобанов]

нет, заливается теперь элемент списка li, а не ссылка a - посмотрите, сравните со своим вариантом - отличие видно справа от каждой ссылки. Нe а так - кривовато у Вас, разберитесь с padding и margin.

Answer 5

[Seva Sargsyan]

просто пишите для li

.menumain li:hover{
	background:#5b9bc8;