Проблемы с навигацией

[saha300000]

Я столкнулся с проблемой, когда делал навигацию для сайта. Суть в том, что оп не понятной мне причине, при наведении появляется ещё раз border.

По пунктам:

Нажал на пункт меню > Ссылка активна, рамка снизу активна. Но при hover эффекте  на уже активный пункт меню появляется ещё один border. Как его убрать?

 

 код на JS:

$(document).ready(function(){    var link = window.location.pathname;    $('#custom-bootstrap-menu a[href="'+link+'"]').parent().addClass('Active');  });Ну тут понятно, обьяснять не надо

код CSS:

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {    color: rgba(255, 255, 255, 1);    border-bottom: 4px solid rgba(20, 224, 102, 1);}.Active имеет свойство рамки снизу

Edited August 10, 2015 by saha300000

[wwt]

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {

color: rgba(255, 255, 255, 1);

border-bottom: 4px solid rgba(20, 224, 102, 1);

}

.Active имеет свойство рамки снизу

[stepfire]

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {

color: rgba(255, 255, 255, 1);

border-bottom: 4px solid rgba(20, 224, 102, 1);

}

.Active имеет свойство рамки снизу

Вы наверное не правильно поняли.

Так и должно быть, чтобы был hover эффект.

Вопрос в том, что активный пункт меню уже содержит Border(JS код добавляет активному пункту класс Active, который имеет border).

Но при наведении на уже активный пункт появляется ещё один hover эффект, который прибавляет к border'у ещё один border. 

Нужно то ли запретить Hover на уже активном элементе через JS, то ли сделать это через css.

 

[stepfire]

Проблема решена.Проблема была в JS коде.
Вот правильный код
 

$(function() {    var url=document.location.href;    $.each($('#custom-bootstrap-menu a'),function(){    if(this.href==url){$(this).addClass('Active');};    }); });