使用li + li作为导航分隔符会在第一个项目</li>之后清除<li>背景

Question

我正在使用水平导航，感谢问题：Separators For Navigation，我读到了使用li + li（伪？）选择器设置基于图像的项目分隔符的好方法。

在我的代码中，我正在为<li>代码定义背景图片，但是一旦我添加了li + li代码，就会出现分隔符，但所有li的背景都会出现第一个消失之后的标签。如果我删除#nav-items li+li代码，则所有项目的背景都会恢复（但显然我没有分隔符）

（截图）

我的代码如下所示：

<ul id="nav-items">
  <li class="nav-item"><a href="#" title="Home">Home</a></li>
  <li class="nav-item"><a href="#" title="About Us">About Us</a></li>
  etc...
</ul>

和我的css：

#nav-items {
    list-style-type: none;
}

.nav-item {
    display: list-item; 
    float:left;
    width: 150px;
    height: 39px;
    background: url('../images/top-nav-bg.png');
    background-repeat: repeat-x;
    padding: 9px 20px;
    color: #fff;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: 1px;
    font-weight: 300;
}

#nav-items li+li {
    background:url('../images/top-nav-separator.png') no-repeat top left; 
}

我做错了什么？

Answer 1

#nav-items li+li:before{
    background:url('../images/top-nav-separator.png') no-repeat top left; 
    content:"";
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:3px   /* your image width */
    height:57px   /* your image height */
}