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

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

从 first-child hover 中移除 background:none 修复了它。