Html 鼠标悬停时通过列表元素的图像

因此，我在这里尝试创建一个简单的水平css菜单，然而，每当用户将鼠标悬停在列表中的某个项目上时，我希望在该项目上方显示一个小三角形 这是我到目前为止的想法 HTML:

即使我指定了背景位置在顶部中心，它也根本没有显示出来。。。 我做错了什么？ 链接到JSFIDLE:

---

，我基本上想要文本上方的小三角形，指向文本，而不是侧面

将背景样式集中到一行：

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

---

请参见。

将背景样式添加到一行：

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

请参阅。

使用速记属性会将所有未指定的属性设置为其初始值：

“background”属性是一个速记属性，用于在样式表中的同一位置设置大多数背景属性。[…]给定有效声明，对于每一层，速记首先将“背景图像”、“背景位置”、“背景大小”、“背景重复”、“背景原点”、“背景剪辑”和“背景附件”中每一层的对应层设置为该属性的初始值，然后在声明中为该层指定任何显式值

任用

#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background-image:url('images/Project_0040_Layer-21.png');
    background-repeat: no-repeat;
 }

或

为了避免这种情况。

使用速记属性会将所有未指定的属性设置为其初始值：

“background”属性是一个速记属性，用于在样式表中的同一位置设置大多数背景属性。[…]给定有效声明，对于每一层，速记首先将“背景图像”、“背景位置”、“背景大小”、“背景重复”、“背景原点”、“背景剪辑”和“背景附件”中每一层的对应层设置为该属性的初始值，然后在声明中为该层指定任何显式值

任用

#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background-image:url('images/Project_0040_Layer-21.png');
    background-repeat: no-repeat;
 }

或

---

为了避免这种情况。

我为你准备了这个。可能有用

---

我为你准备了这个。可能有用

---

请在此处重现您的问题，并将链接包含在您的问题中。请在此处重现您的问题，并将链接包含在您的问题中。好的，谢谢，在我将规则连接到一行之后效果很好。好的，谢谢，在我将规则连接到一行之后效果很好

#navbar2 ul li:hover 
 {  
    height:50px;
    background:url('images/Project_0040_Layer-21.png') no-repeat 50% 0%;
 }