html - 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从第一个孩子悬停中删除它修复了它。