Html 在悬停期间，如何使链接背景位于其下方？

我不知道该怎么做，当我把鼠标悬停在一个链接上时，链接下面会出现一个橙色的小三角形，沿着我已经有的一条线。下面是与此相关的html和css

-----HTML-----

---

我也有一个所有链接的背景图像。我认为问题在于，因为每个链接基本上都是文本周围的一个框，所以你不能给它一个超出该框的背景。我只是不知道如何修复它。

你可以改为使用jQuery在链接下方使用

position:absolute

在

mouseover

上使用

position:absolute

将图像显示在一个单独的

div

中。终于明白了。谢谢你的帮助。

你可以发布背景图片的链接吗？当然你可以给它一个延伸过方框的背景，只需给方框填充。如果你在jsfiddle.net上做一个演示，也许会更容易理解这个问题？我有一个jsfiddle，他几乎可以提供图像了。在我睡觉的时候，请随意用叉子回答。我如何使用jsfiddle.net？以前从未有过。@kojiro你知道如何将图像放到JSFIDLE上吗？我还不知道jquery。有点像刚开始。@DylanButh很公平。这在CSS中可能更好，但在我得到这些图像之前我帮不了你。

<div id='links'>
  <ul>
    <li><a href='#'>home</a></li>
    <li><a href='#'>interests</a></li>
    <li><a href='#'>game</a></li>
    <li><a href='#'>about</a></li>
    <li><a href='#'>contact</a></li>
  </ul>
</div>

div#links {
background: url('images/links_bg.gif') no-repeat right;
height: 75px;
margin: 0px;
}
div#links ul {
float: right;
list-style: none;
margin: 48px 35px 0px 0px;
}
div#links ul li {
display: inline;
margin: 0px;
}
div#links ul li a {
color: #e5e4e4;
font-size: 12px;
text-decoration: none;
margin: 0px 15px 0px 15px;;
}
div#links ul li:hover {
background: url('images/link_triangle.png') no-repeat;
font-weight: bold;
}