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

[DSL]

Вот CSS

.menu2 {padding:0 0 0 34px; margin:0; list-style:none; height:34px; position:relative;}
.menu2 li {float:left;}
.menu2 li a {display:block; float:left; height:30px; line-height:29px; background:url(/images/4.png) no-repeat; color:#fff; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 12px 0 0; background:url(/images/5.png) right top;}
.menu2 li a:hover {color:#fff; background:url(/images/4-on.png) no-repeat;}
.menu2 li a:hover b {background:url(/images/5on.png) right top;}

Вот HTML

<ul class="menu2">

<li><a href="" title="Главная">Главная</a></li>
<li><a href="" title="Мой профиль">Мой профиль</a></li>
<li><a href="" title="Вход">Вход</li>
</ul>

А вот так отображается

Посмотреть вложение 1117

Почему то не работают две картинки. Путь прописан правильно

 

[Serg@NT]

а что такое b в стилях, позвольте поинтересоваться?

И вообще, как должно то быть?

 

[DSL]

а что такое b в стилях, позвольте поинтересоваться?

И вообще, как должно то быть?

Ну кнопка целая должна быть А не кусок слева

 

[kein]

Это самое непонятное

b

удалить надо бы)

 

[Serg@NT]

а что такое b в стилях, позвольте поинтересоваться?

И вообще, как должно то быть?

Ну кнопка целая должна быть А не кусок слева

Тогда нужно избавиться от строчек с b. Стили, которые к li a b применяются, применить к li a, а те, которые сейчас у li a - применить к li.

 

[DSL]

Тогда нужно избавиться от строчек с b. Стили, которые к li a b применяются, применить к li a, а те, которые сейчас у li a - применить к li.

А пример можно? :biggrin: :biggrin: :biggrin:

 

[Serg@NT]

Да просто убрать b и заменить:

.menu2 {padding:0 0 0 34px; margin:0; list-style:none; height:34px; position:relative;}
.menu2 li {display:block; float:left; height:30px; line-height:29px; background:url(/images/4.png) no-repeat; color:#fff; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a {float:left; display:block; padding:0 12px 0 0; background:url(/images/5.png) right top;}
.menu2 li:hover {color:#fff; background:url(/images/4-on.png) no-repeat;}
.menu2 li a:hover {background:url(/images/5on.png) right top;}

 

[DSL]

Serg@NT

Я так уже пробовал. Не то что надо получается:
При наводе курсором посредине кнопки она выделяется как надо
Посмотреть вложение 1122

Ну если курсор отвести чуть левее то:
Посмотреть вложение 1123

:wacko: :blink:

 

[tigra60]

Ну, во-первых, здесь:

<li><a href="" title="Вход">Вход</li>

не закрыт тег А. Надеюсь, это просто описка.
Во-вторых, код работает в точности так, как Вы все вместе ему задали:
- наводим на элемент LI - срабатывает li:hover с его бекграундом
- наводим на элемент А - срабатывает и li:hover и li a:hover (оба бекграунда)
В этом случае, нужно изменить строчку:

.menu2 li a:hover {background:url(/images/5on.png) right top;}

на:

.menu2 li:hover а {background:url(/images/5on.png) right top;}

А вто здесь на арену выходит дивное творение дядюшки Билли, неизвестно, с какого перепуга понимающее hover только применительно к элементу А. Поэтому, умные и хитрые программеры ввели элемент В. Правильнее было бы использовать SPAN, но В - короче (лень - двигатель прогресса).

Резюме:
1. код CSS оставить, как в первом посте.
2. в код HTML добавить элементы B:

	<ul class="menu2">
		<li><a href="" title="Главная"><b>Главная</b></a></li>
		<li><a href="" title="Мой профиль"><b>Мой профиль</b></a></li>
		<li><a href="" title="Вход"><b>Вход</b></a></li>
	</ul>

Удачи!

 

[DSL]

Урааа!!! :laugh: :laugh: :laugh:
Наконец то получилось
Спасибо Тигра