CSS 水平菜单中第一个 ul 没有图像

Question

我正在尝试使用 ul 制作带有自定义项目符号图像的水平菜单。但我也希望第一个菜单项的左侧没有项目符号，所以它看起来很整洁。因此，项目符号仅出现在项之间，而不是在菜单项开始之前。

这是我到目前为止所拥有的：

#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator {
    text-align: left;
    text-transform: uppercase;
    color: #777;
    font-family: Trajan;
    background-image: url('../images/bullet.jpg');
    background-repeat: no-repeat;
    background-position: 0px 15px;
    padding-left: 25px;
}
#navwrap ul.nav > li > a:hover, #navwrap ul.nav > li .separator:hover {
    color: #333;
    background-image: url('../images/bullet.jpg');
    background-repeat: no-repeat;
    background-position: 0px 15px;
    padding-left: 25px;
}
#navwrap ul.nav > li.active > a, #navwrap ul.nav > li.active .separator {
    color: #333;
    text-align: left;
    background-image: url('../images/bullet.jpg');
    background-repeat: no-repeat;
    background-position: 0px 15px;
    padding-left: 25px;
}

我尝试添加：

#navwrap ul.nav > li:first-child > a, #navwrap ul.nav > li:first-child .separator {
        text-align: left;
        text-transform: uppercase;
        color: #777;
        font-family: Trajan;
    background: none;
        padding-left: 25px;
}
#navwrap ul.nav > li:first-child > a:hover, #navwrap ul.nav > li:first-child .separator:hover {
    color: #333;
    background-repeat: no-repeat;
    background-position: 0px 15px;
    padding-left: 25px;
}
#navwrap ul.nav > li:first-child.active > a, #navwrap ul.nav > li:first-child.active .separator {
    color: #333;
    text-align: left;
    background: none;
    padding-left: 25px;
}

这似乎有效，但当我将鼠标悬停在菜单上时，菜单向右"跳"了一点。在悬停状态下，在不移动第一个项目的情况下实现我正在尝试执行的操作的最佳方法是什么？

谢谢JoshC，从悬停中删除Background:none修复了它。

谢谢。

Answer 1

从第一个子悬停中删除background:none修复了它。