0

所以我在这里要做的是一个简单的水平 css 菜单，但是，每当用户将鼠标悬停在列表中的某个项目上时，我希望在所述项目上方显示一个小三角形这就是我想出的远 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/，我基本上想要文本上方的小三角形，指向它而不是两侧

4

3 回答 3

3

将背景样式连接到一行：

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

请参阅更新的小提琴示例。

于 2012-07-19T21:37:07.090 回答
0

我为你敲了这个。可能有点用。

http://jsfiddle.net/wWMjF/11/

于 2012-07-19T21:54:27.027 回答
0

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

'background' 属性是一个简写属性，用于在样式表的同一位置设置大多数背景属性。[...] 给定一个有效的声明，对于每一层，速记首先设置“背景图像”、“背景位置”、“背景尺寸”、“背景重复”、“背景- origin'、'background-clip' 和 'background-attachment' 到该属性的初始值，然后分配在声明中为该层指定的任何显式值。

要么使用

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

为了避免这种情况。

于 2012-07-19T21:37:30.660 回答