Использование last-child в UL / LI css

Question

У меня есть веб-сайт, который я создаю, и я делаю для него меню.

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

Код CSS:

div#menu ul {
top:5px;
position: relative;
list-style-type: none;
height: 80px;
width: 900px;
margin: auto;
}
div#menu li{
float:left;
}
div#menu ul a {
position: relative;
background-image: url(divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 49px;
padding-left: 49px;
display: block;
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #001B24;
}
div#menu ul > li:last-child { 
background-image: none !important; 
}

Это HTML:

 <ul>
 <li><a href="#">Bemutatkozó</li></a>
 <li><a href="#">Kínálatunk</li></a>
 <li><a href="#">Referenciáink</li></a>
 <li><a href="#">Kapcsolat</li></a>
 <li><a href="#">Előjegyzés</li></a>
 </ul>

Я попробовал все, но фоновое изображение не исчезнет напоследний ребенок.Пожалуйста, помогите :) Спасибо заранее!

Answer 1

Похоже, что изображение находится на потомках a элементов li, а не на самом li.Тем не менее, вы можете попробовать вместо этого:

div#menu ul > li:last-child a { 
    background-image: none; 
}

Answer 2

Drupal 7, у меня это сработало:

div#navigation ul#main-menu.links > li:last-child a {
  background-image: none;
}