CSS navigation background

Question

Я пытаюсь создать пользовательскую навигацию CSS для своего веб-сайта, но у меня есть некоторые проблемы, которые вы можете найти в коде sniped ниже. Я делаю CSS вертикальной навигации здесь есть код:

<style type="text/css"> 

/* GT stylesheet */ 
#cssmenu > ul { 
list-style: none; 
margin: 0; 
padding: 0; 
vertical-align: baseline; 
line-height: 1; 
} 

/* The container */ 
#cssmenu > ul { 
display: block; 
position: relative; 
width: 150px; 
} 

/* The list elements which contain the links */ 
#cssmenu > ul li { 
    display: block; 
    position: relative; 
    margin: 0; 
    padding: 0; 
    width: 250px; 
} 

    /* General link styling */ 
    #cssmenu > ul li a { 
     /* Layout */ 
     display: block; 
     position: relative; 
     margin: 0; 
     border-top: 1px dotted #3a3a3a; 
     border-bottom: 1px dotted #1b1b1b; 
     padding: 11px 20px; 
     width: 210px; 

     /* Typography */ 
     font-family: Helvetica, Arial, sans-serif; 
     color: #d8d8d8; 
     text-decoration: none; 
     text-transform: uppercase; 
     text-shadow: 0 1px 1px #000; 
     font-size: 13px; 
     font-weight: 300; 


     /* Background & effects */ 
     background: #282828; 
    } 

    /* Rounded corners for the first link of the menu/submenus */ 
    #cssmenu > ul li:first-child>a { 
     border-top-left-radius: 4px; 
     border-top-right-radius: 4px; 
     border-top: 0; 
    } 

    /* Rounded corners for the last link of the menu/submenus */ 
    #cssmenu > ul li:last-child>a { 
     border-bottom-left-radius: 4px; 
     border-bottom-right-radius: 4px; 
     border-bottom: 0; 
    } 


    /* The hover state of the menu/submenu links */ 
    #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a { 
     color: #000; 
     text-shadow: 0 1px 0 rgba(0, 0, 0, .3); 
     background: #A9CA6F; 
     background: -webkit-linear-gradient(bottom, #A9CA6F, #B4D876); 
     background: -ms-linear-gradient(bottom, #A9CA6F, #B4D876); 
     background: -moz-linear-gradient(bottom, #A9CA6F, #B4D876); 
     background: -o-linear-gradient(bottom, #A9CA6F, #B4D876); 
     border-color: transparent; 
    } 

    /* The arrow indicating a submenu */ 
    #cssmenu > ul .has-sub>a::after { 
     content: ''; 
     position: absolute; 
     top: 16px; 
     right: 10px; 
     width: 0px; 
     height: 0px; 

     /* Creating the arrow using borders */ 
     border: 4px solid transparent; 
     border-left: 4px solid #d8d8d8; 
    } 

    /* The same arrow, but with a darker color, to create the shadow effect */ 
    #cssmenu > ul .has-sub>a::before { 
     content: ''; 
     position: absolute; 
     top: 17px; 
     right: 10px; 
     width: 0px; 
     height: 0px; 

     /* Creating the arrow using borders */ 
     border: 4px solid transparent; 
     border-left: 4px solid #000; 
    } 

    /* Changing the color of the arrow on hover */ 
    #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after { 
     border-left: 4px solid #fff; 
    } 

    #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before { 
     border-left: 4px solid rgba(0, 0, 0, .3); 
    } 
</style> 

Проблема заключается в том, что я не могу сделать ссылку я нажал на, чтобы изменить свою предысторию: # A9CA6F. Я хочу, когда я сделаю свой <li> с id/class активным, чтобы остановиться с этим цветом: # A9CA6F Любая помощь?

Заранее благодарен!

DEMO Это ссылка для скрипки!

Answer 1

Добавить это ...

#cssmenu li.active a {background-color:#A9CA6F;} 

Я думаю, что все, что вам нужно сделать, это добавить цвет фона в a и цель его вполне конкретно. Вот скрипка - я добавил строку внизу CSS. Если вы не настроите таргетинг на него достаточно конкретно, он не будет отменять стиль по умолчанию.

EDIT

Чтобы немного уточнить, ранее в вашем CSS вы заявили:

#cssmenu > ul li a {...} 

Так, чтобы нацеливать активный класс, который вы должны быть болееспецифичны, чем это, в противном случае вышеуказанного правила перекроет все остальные - значит:

#cssmenu > ul li.active a {...} 

и не ...

li.active a {...} 

Так, например, в не считает не запрещенный бой между правилами CSS ...

1. #menu a била a.active
2. a.active будет бить только a
3. #wrapper #menu a будет бить #menu a

:-) HTH

Answer 2

Попробуйте и проверить эту скрипку http://jsfiddle.net/sarfarazdesigner/WT9Uw/3/

#cssmenu > ul li.active > a, #cssmenu > ul li.active > a { 
    background-color:#A9CA6F;    
    color: #000; 
} 

Answer 3

Вы можете попробовать его с помощью какой-то JavaScript, если он будет перемещаться и внутри одной и той же странице. Вот решение JQuery:

$("#cssmenu li").click(function(){ 
    $("#cssmenu li").removeClass('active'); 
    $(this).addClass('active'); 
}); 

jsfiddle

Он перемещает .active класс к любому li было щелкнул. И в CSS вы можете добавить селектор, который выглядит примерно так, что (на ваших наведении селекторов):

#cssmenu > ul li.active a 

Answer 4

это просто добавить этот код:

#cssmenu > ul li.active a{ 
    background-color: #A9CA6F; 
} 

Demo