2013-10-07 2 views
0

Я пытаюсь сделать горизонтальное меню, используя 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; 
} 

Который, казалось, работали, но сделал меню «прыжок» вправо немного, когда я парил над ним. Каков наилучший способ добиться того, что я пытаюсь сделать, если первый элемент не перемещается, когда в состоянии зависания?

Thanks JoshC, снятие Background:none с наклонного исправления.

спасибо.

+1

Удалить «фон: нет»? –

+0

Можете ли вы также разместить свой HTML-код? Вы можете использовать первый псевдоним класса Pseudo-class, а затем установить свойство в background: none – jhedm

ответ

0

Извлечение background:none от первого зависания ребенка зафиксировано.

Смежные вопросы