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修复了它。

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

1 个答案: