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在水平菜單

回答

相關問題