html - 悬停在列表元素上的图像

Question

所以我想在这里做的是一个简单的水平 css 菜单，但是，每当用户将鼠标悬停在列表中的元素上时，我希望在该元素上方显示一个小三 Angular 形 到目前为止，这是我想出的 HTML:

<div id="navbar2">
        <div id="navholder">
            <ul id="nav2">
                   <li>
                        <a href="#">category one</a>
                   </li>
                   <li>
                        <a href="#">section two</a>
                   </li>
                   <li>
                        <a href="#">articles</a>
                   </li>
                   <li>
                        <a href="#">posts here</a>
                   </li>
                   <li>
                        <a href="#">category two</a>
                   </li>
            </ul>
        </div>
  </div>

以及应用于它的 css:

ul#nav2
{
    background:url('images/redbar.png');
    list-style-type:none;
    height:50px;
}
#navbar2 ul li
{
    height:50px;
    display:inline;
    line-height:35px;
    padding-left:19px;
}
#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background:url('images/Project_0040_Layer-21.png') no-repeat;
 }
 #navbar2 ul li a 
{
    color:#fff;
    text-decoration:none;
    font-size:10pt;
    }

即使我将背景位置指定在顶部中心，它也根本不会显示... 我究竟做错了什么？ 链接到 jsfiddle: http://jsfiddle.net/wWMjF/1/ , 我基本上想要文本上方的小三 Angular 形，指向它而不是两侧

Answer 1

将背景样式连接到一行:

#navbar2 ul li:hover
{  
    height:50px;
    background:url('http://i.imgur.com/dyj8m.png') no-repeat center 0;
}

参见 updated fiddle sample .