ホバー中にリンクバックグラウンドをその下に置くにはどうすればよいですか？

Question

リンク上にマウスを置くと、既にある行に沿って小さなオレンジ色の三角形がリンクの下に現れるようにする方法を理解できません。これに関連するHTMLとCSSは以下のとおりです。

----- ----- HTML

<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> 

----- ----- CSS

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; 
} 

私はまた、すべてのための背景画像を持っていますリンク。私は問題は、各リンクは基本的にテキストの周りのボックスであるため、そのボックスを越えて延びる背景を与えることはできないということです。私はちょうどそれを修正する方法を知らない。

Answer 1

私はちょうど詰め物を使いこなす必要がありましたが、しばらくは何ができませんでした。結局それを得た。助けてくれてありがとう。

Answer 2

代わりに、mouseoverのposition: absoluteを使用して、リンクの下の別のdivの画像を表示するためにjQueryを使用することができます。