Css 背景图像：悬停溢出

到处搜索，尝试了几种技术，但还没有找到可行的答案

目标：将鼠标悬停在导航项上时显示“pin”背景图像。 问题：由于背景图像比项目高，当pin的一部分延伸超过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;
 }

---

欢迎所有建议。谢谢。

CSS中的背景与Html元素不同。如果需要锚定来显示，但锚定太小。您需要将锚定标记的大小更改为图像的大小。否则，您可以更改内部图像的背景大小以适应锚定

此外，在主菜单a中还有一个重复的分号（；），请参见：

---

职位：相对

使用z索引将图像放置在顶部，而不会被截断。您可以将代码添加到小提琴中，以便我们可以查看它的实际情况吗？似乎是伪元素的理想位置。JSFDDL将是理想的…特别是对于实际图像。