Как установить активный в cssmenu

Question

Привет всем это код CSS используется для сценария .. Я хотел бы установить активный статус для того же один раз нажал на закладках ..

@import url(http://fonts.googleapis.com/css?family=Raleway); 

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#cssmenu { 
    width: auto; 
    border-bottom: 3px solid #47c9af; 
    font-family: Raleway, sans-serif; 
    line-height: 1; 
} 
#cssmenu ul { 
    background: #ffffff; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu.align-center > ul { 
    font-size: 0; 
    text-align: center; 
} 
#cssmenu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu.align-right > ul > li > a { 
    margin-right: 0; 
    margin-left: -4px; 
} 
#cssmenu > ul > li > a { 
    z-index: 2; 
    padding: 18px 25px 12px 25px; 
    font-size: 15px; 
    font-weight: 400; 
    text-decoration: none; 
    color: #444444; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    margin-right: -4px; 
} 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover { 
    color: #ffffff; 
} 
#cssmenu > ul > li > a:after { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    width: 100%; 
    height: 120%; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transform: perspective(5px) rotateX(2deg); 
    -webkit-transform-origin: bottom; 
    -moz-transform: perspective(5px) rotateX(2deg); 
    -moz-transform-origin: bottom; 
    transform: perspective(5px) rotateX(2deg); 
    transform-origin: bottom; 
} 
#cssmenu > ul > li:active > a:after, 
#cssmenu > ul > li:hover > a:after, 
#cssmenu > ul > li > a:hover:after { 
    background: #47c9af; 
} 
#cssmenu ul > li:active{ 
    background-color: #47c9af; 
} 

и HTML упоминается как показано ниже ..

<div id='cssmenu'> 
<ul> 
    <li><a href='#'>Home</a></li> 
    <li><a href='#'>Products</a></li> 
    <li><a href='#'>Company</a></li> 
    <li><a href='#'>Contact</a></li> 
</ul> 
</div> 

Но когда я выбрал язычки активный не получает измененные ...

Answer 1

Я думаю, литий элемент не может быть активным, якорный элемент (а) может быть активным, так что вы должны просто используйте

a:active 

без

li:active 

перед ним.

Или, если вам нужно установить элемент LI активен, вы можете использовать JavaScript для добавления класса щелкнули Li элемента, а затем стиль .active класса