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

我想使用一个自定义项目符号图像使用ul的水平菜单。但我也希望第一个菜单项左侧没有子弹，因此看上去很整齐。所以子弹只出现在物品之间，而不是在菜单项开始之前。CSS没有图像的第一个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固定它。

谢谢。

来源

2013-10-07 Jake

删除'background：none'？ –

你也可以发布你的HTML？您可以使用CSS Pseudo-class first-child然后将该属性设置为background：none – jhedm

从第一个孩子悬停中删除background:none固定它。

来源

2013-10-07 01:39:30 Jake

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

回答

相关问题