Фоновое изображение на a: зависание переполнения

Question

Искал везде, попробовал несколько методов, но пока не нашел работоспособного ответа.

Цель: отображение фонового изображения «штырька» при наведении курсора на элемент навигации. Проблема: часть штыря исчезает, когда она проходит мимо метки a: hover, потому что фоновое изображение выше, чем элемент

Текущий css находится ниже. Все родительские элементы настроены на переполнение: видимые

.menu-primary a { 
    display: block; 
    padding: 6px 0 6px 0; 
    text-align: center; 
    width: 184px; 
    height: auto; 
    margin: 0 5px 0 5px; 
    position: relative;; 
    overflow: visible; 
} 

.menu-primary li#menu-item-23 a { 
    background-color: #dfe6ab; 
    margin-left: 0; 
    overflow: visible; 
} 

.menu-primary li#menu-item-23 a:hover, 
.menu-primary li#menu-item-23:hover a { 
    background: url(images/pin.png) no-repeat left 0px top -7px; 
    background-color: #dfe6ab; 
    color: #000000; 
    overflow: visible; 
    height: auto; 
} 

Все предложения приветствуются. Спасибо.

Answer 1

Фон в CSS не действует как элементы HTML. Если вам нужен якорь, чтобы отобразить его, но якорь слишком мал. Вам нужно будет изменить размер тега привязки на размер вашего изображения. В противном случае вы можете изменить фоновый размер изображения внутри, чтобы поместиться внутри якоря.

Кроме того, у вас есть двойная двоеточие (;) в .menu-primary a, см.: позиция: relative ;;