Как удалить разделитель при наведении в горизонтальной навигации CSS?

У меня есть навигация css с разделителем между пунктами меню. Когда я наводил курсор на один элемент, который содержит подменю (например, «Образ жизни»), эти разделители выглядят очень уродливо, потому что они не находятся «внутри» области фона ссылки, а простираются влево и вправо. Есть ли способ удалить эти разделители только при наведении и активном классе?

Вот мой css-код:

    #mainnav {
    width: auto;
    height: 100px;
    padding-top: 26px;
    float: right;
    right:0;
    z-index:100;
}
#mainnav ul,
#mainnav li,
#mainnav span,
#mainnav a {
  position: relative;
  margin: 0;
  padding: 0;
}
#mainnav ul{
    list-style-type:none;
}
#mainnav ul li:hover {
    background-color: #AEB67F;
}
#mainnav ul li a {
    padding: 50px 12px 57px 12px;
    text-align: center;
}
#mainnav ul li a:hover, #mainnav ul li a.active  {
    background-color: #AEB67F;
    padding: 50px 12px 57px 12px;
}
#mainnav > ul > li {
  float: right;
}
#mainnav ul:after {
    content: ""; clear: both; display: block;
}
#mainnav ul li {
    border-left:solid 1px #B4BC84;
}
#mainnav ul li:last-child {
    border:none;
}
#mainnav ul ul li + li:after {
    content: "";
    clear:both;
}
#mainnav ul ul {
    display: none;
}
#mainnav ul li:hover > ul {
    display: block;
}
#mainnav ul ul {
    background: rgb(174,182,127); 
    opacity: 0.9;
    border-radius: 0px; 
    position: absolute; 
    top: 74px;
    width:170px;
}
#mainnav ul ul li {
    float: none; 
    border-top: none;
    position: relative;
    padding: 8px 12px 8px 0;
    border-bottom: 1px dotted #94A062;
    border-top: none;
}
#mainnav ul ul li a {
    color: #fff;
    text-decoration:none;
    text-align:left;
    padding: 8px 30px 8px 12px;
}
#mainnav ul ul li:last-child a {
    border-bottom: none;
}
#mainnav ul ul li a:hover {
    background: rgb(48,50,40);
     -webkit-transition: all .2s ease-in-out;  
     -moz-transition: all .2s ease-in-out; 
     -ms-transition: all .2s ease-in-out;  
     -o-transition: all .2s ease-in-out;  
     transition: all .2s ease-in-out;
     padding: 8px 30px 8px 18px;
}
#mainnav ul ul li:hover {
    background: rgb(48,50,40);
    padding: 8px 0;
    border: none;
}

Вот ссылка на сайт, над которым я работаю: http://prestigetrips.com/lapointe/index.php?id=1

Я надеюсь, что вы можете помочь! Заранее спасибо!


navigation css separator
person Belinda Baumgartner    schedule 05.07.2013    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Просто удалите border-left:solid 1px #B4BC84; строку из #mainnav ul li { .

Я надеюсь, что это поможет вам!

person NETCreator Hosting    schedule 05.07.2013
comment
Это полностью удалило разделитель :( Но решение от Барни сработало. - person Belinda Baumgartner; 05.07.2013

arrow_upward
0
arrow_downward

Вы можете сделать короткий скрипт, например

$('.menu1').mouseenter(function{
    $(this).css('border-left', '0');
}).mouseleave(function{
    $(this).css('border-left', 'add your values here');
});

Это одно решение.

person madmanali93    schedule 05.07.2013

arrow_upward
0
arrow_downward

Я поиграл и придумал это:

Замените #mainnav ul li с border-left на border-right,
и

#mainnav ul li:last-child {
   border: medium none;
}

to:

#mainnav ul li:first-child {
   border: medium none;
}

Теперь добавьте следующий стиль:

#mainnav ul li:hover,
#mainnav ul li:hover + li {
   border: none;
}

Он называется селектором соседних элементов.
Он должен работать. в IE8 и выше.

person ǝsʞǝꓕ ɐuɹɐꓭ    schedule 05.07.2013
comment
Большое спасибо за это, это работает! Единственная проблема сейчас - скачок на 1 пиксель при наведении курсора. Я уже пытался настроить, но ничего не получается. Вы можете помочь здесь? - person Belinda Baumgartner; 05.07.2013

arrow_upward
0
arrow_downward

Я нашел решение! я должен был добавить

#mainnav ul li:first-child:hover{
margin-right: 0;
}

Теперь больше нет "прыжка на 1px", и все выглядит нормально. Спасибо за вашу помощь!

person Belinda Baumgartner    schedule 06.07.2013