Сss как сделать стрелочку в меню поверх картинки?

Question

[Антон Вебсайтовский]

Здравствуйте, не могу в меню сделать стрелочку поверх бграунда меню.

.sky-mega-menul li a {
  background: #B2B2B2 url(/media/images/mlfon.jpg);
  border-radius: 3px;
  margin-bottom: 5px;
  border-left: 3px solid #F46B23;
font-weight: 400;
  padding: 14px 35px 14px 20px;
display: block;
text-decoration: none;
  color: #000;
}

стрелочка которая должна быть поверх.
ul.sky-mega-menul li.parent {
background:url(/media/images/arrow-down.png) right center no-repeat;
cursor: pointer;
}

выходит что стрелочка есть, но она прячется под background: #B2B2B2 url(/media/images/mlfon.jpg);

Извиняюсь что все не сразу выложил, вот меню и весь код css
https://jsfiddle.net/z9q6p2gd/1/

Comments

[Сергей delphinpro]

Простая логика подсказывает, что стрелочку нужно расположить поверх фона O__o
Зачем вы ее внизу рисуете, если надо наверху? И еще удивляетесь, что ее не видно. Чудные люди...

Answer 1

[ukoHka]

.sky-mega-menul li.parent > a {
  background: url(http://izoluxdv.ru/media/images/arrow-down.png) right center no-repeat, #B2B2B2 url(http://izoluxdv.ru/media/images/mlfon.jpg);
}
.sky-mega-menul li.parent:hover > a {
  background: url(http://izoluxdv.ru/media/images/arrow-down.png) right center no-repeat, #F46B23;
}

Comments

[Антон Вебсайтовский]

Извиняюсь что все не сразу выложил, вот меню и весь код css
https://jsfiddle.net/z9q6p2gd/1/

[ukoHka]

Антон Вебсайтовский: Добавил стрелку, чтобы внутренние ссылки не изменились, но в целом код работает. Просто добавьте его в конец CSS

[Антон Вебсайтовский]

необычный способ.

Answer 2

[Stalker_RED]

А что мешает поменять фоны местами?
https://jsfiddle.net/rdm10m2g/

Comments

[Антон Вебсайтовский]

Извиняюсь что все не сразу выложил, вот меню и весь код css
https://jsfiddle.net/z9q6p2gd/1/

[Stalker_RED]

Антон Вебсайтовский: Так? https://jsfiddle.net/z9q6p2gd/2/

[Антон Вебсайтовский]

Stalker_RED: да, верно, большое спасибо, а как сделать чтобы она не исчезала, ну или менялась на arrow-down1.png - черная стрелка будет.

[Антон Вебсайтовский]

я сделал так
.sky-mega-menul li.parent > a:hover{
background: url(izoluxdv.ru/media/images/arrow-down.png) right center no-repeat, #F46B23;
}

но при наведение на подменю стрелка пропадает. :(

[Stalker_RED]

Антон Вебсайтовский: использовать +
https://www.w3schools.com/css/css_combinators.asp