Стиль li с иконкой стрелочкой вправо

[Alexys]

Имеем список (делается меню)

 

<ul class='menustyle' id='id1'>

<li><a href='javascript:void(0)' id='li1'>Пункт</a></li>
<li><a href='javascript:void(0)' id='li2'>Пункт с меню справа</a></li>
</ul>

 

стиль

.menustyle{

margin: 0;
padding: 0;
list-style: none;
}
.menustyle li a:hover {
background: #c2daad !important;
}

 

Второй пункт

 

<li><a href='javascript:void(0)' id='li2'>Пункт с меню справа</a></li>

 

изменяю на

 

<li style="background:url('/Content/Images/right.png') right center no-repeat;"><a href='javascript:void(0)' id='li2'>Пункт с меню справа</a></li>

 

Появилась стрелка справа

НО
при наведении мышки стрелка пропадает и перерисовывается фон из-за определенного стиля

 

.menustyle li a:hover {

background: #c2daad !important;
}

 

Как поступить? как сделать чтоб и фон менялся и стрелочка оставалась? как совместить background ???

Или же как поместить стрелочку от jquery ?
ui-icon-triangle-1-e

 

 

 

 

 

 

 

 

[afdw]

Вообще такой проблемы нет. 

[antonKar]

Всё правильно, потому что вы указываете, что при ховере в качестве фона у элемента будет использоваться только цвет.

 

Почитайте внимательно что такое background и как он работает.

[rus]

.menustyle li a:hover {background: #c2daad url('/Content/Images/right.png') right center no-repeat;}

только вот непонятно, зачем цвет одному элементу, а картинку - другому?

почему нельзя сделать все на один элемент?

[Alexys]

Спасибо всем огромное! вроде получается...
с помощью ресурса http://jsfiddle.net/пробую...
новому требуемому элементу li присваиваю класс:

<li class="litest"><a href='javascript:void(0)' id='ahtest'>Тестовый раздел</a></li>

в css делаю так

изначально, должен оставаться, используется на других страницах...

.menustyle li a:hover {    background: #c2daad !important}

свой добавил с именем класса litest
 

.menustyle .litest a:hover {    background: #c2daad url('http://placehold.it/16x16')right center no-repeat;} 

только не переопределяется, litest не перекрывает то что выше " .menustyle li a:hover {..."

я понимаю что школьный вопрос.... как переопределить, чтоб отдельный элемент li использовал на hover свой класс а не тот что сверху над ним....

 

ах да а когда просто переопределил - всё четко - напротив иконка только напротив того элемента у которого прописан новый класс litest

.menustyle .litest a {   ...    background:url('http://placehold.it/16x16') right center no-repeat; !important}

а вот hover как........

Edited April 25, 2015 by Alexys

[rus]

<li> // верхний элемент, он будет перекрывать нижний  <a href=""></a> // нижний элемент</li>

у вас каша в голове и коде, если вы хотите что бы ничего нигде не перекрывалось, то сделайте фон и картинку у одного и того же элемента, например у тега <a>, а у тега <li> уберите все.

и еще, если вы не знаете назначение св-ва !important - не нужно его пихать везде где попало.

[Alexys]

Спасибо Всем! Вопрос решен!

[rus]

раз решен, показывайте ваше решение

[Alexys]

Для требуемого li прописал новый класс:

.menustyle .litest a {    background:url('http://placehold.it/16x16') right center no-repeat; }.menustyle .litest a:hover {    background: #c2daad url('http://placehold.it/16x16') right center no-repeat !important;}

в требуемых li собственно указал данный класс 

 <li class="litest"><a href='javascript:void(0)' id='ahtest'>Тестовый раздел</a></li>

который собственно перекрывает базовый класс.

 

работает

[antonKar]

работает

Ещё можно просто менять background-color