Настройка положения индикатора выпадающего индикатора

Question

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

Вот мой текущий CSS:

nav li.hasChild:after { 
    content: url(../images/layout/dropdownOver.png); 
} 

Это изображение добавляется непосредственно справа от пункта меню, но я не знаю, как изменить его.

Спасибо!

Answer 1

Используйте этот CSS вместо:

nav li.hasChild:after { 
    content: url(../images/layout/dropdownOver.png); 
    display: block; 
    margin-left: -10px; 
} 

Или вы можете использовать это:

nav li.hasChild { 
    background-image: url(../images/layout/dropdownOver.png); 
    background-repeat: no-repeat; 
    background-position: right; 
} 

Тогда в образе нужно поставить прозрачную рамку вокруг края

Answer 2

я придумал с двумя различными подходами.

Первый очень похож на твой, используя content: url(path_to_image) непосредственно: JS Bin

Это делается путем добавления display: block; в обоих .menu-item и это :after, вызывая «разрыв строки». text-align: center; заботиться о центрировании изображения, так как это свойство display установлено по умолчанию inline.

Другой немного по-другому: JS Bin

Концепция такая же, но теперь мы используем стрелки изображение в качестве background из :after вместо content. Я генерирую немного больше кода, но при использовании псевдоэлемента дает вам больше гибкости.