「アクティブ」クラスが機能しない

Question

私のCSSに問題があります。私はアクティブなクラスを垂直メニューでピンクで強調表示された状態に設定しようとしていますが、そうではありません。どのように私はそれの上にユーザーのホバリングなしで点灯し続けます。ここに私のHTMLとCSSがあります。

HTMLのCODE：

<div id="cssmenu"> 
    <ul> 
    <li class="active"><a href="http://www.local-trends.com/cellphones--parts.html">Shop All</a></li> 
<li><a href="#">Cell Phones & Smartphones</a></li> 
<li><a href="#">Smart Watches</a></li> 
<li><a href="#">Batteries</a></li> 
<li><a href="#">Cases, Covers & Skins</a></li> 
<li><a href="#">Chargers & Cradles</a></li> 
<li><a href="#">Headsets</a></li> 
<li><a href="#">Phone Cards & SIM Cards</a></li> 
<li><a href="#">Cell Phone & Smartphone Parts</a></li> 
    </ul> 
</div> 

CSSコード：

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#cssmenu ul { 
    position: relative; 
    z-index: 597; 
    float: left; 
} 
#cssmenu ul li { 
    float: left; 
    min-height: 1px; 
    line-height: 1em; 
    vertical-align: middle; 
} 
#cssmenu ul li.hover, 
#cssmenu ul li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
} 
#cssmenu ul ul { 
    margin-top: 1px; 
    visibility: hidden; 
    position: absolute; 
    top: 1px; 
    left: 99%; 
    z-index: 598; 
    width: 100%; 
} 
#cssmenu ul ul li { 
    float: none; 
} 
#cssmenu ul ul ul { 
    top: 1px; 
    left: 99%; 
} 
#cssmenu ul li:hover > ul { 
    visibility: visible; 
} 
#cssmenu ul li { 
    float: none; 
} 
#cssmenu ul ul li { 
    font-weight: normal; 
} 
/* Custom CSS Styles */ 
#cssmenu { 
    font-family: 'Lato', sans-serif; 
    font-size: 18px; 
    width: 200px; 
} 
#cssmenu ul a, 
#cssmenu ul a:link, 
#cssmenu ul a:visited { 
    display: block; 
    color: #848889; 
    text-decoration: none; 
    font-weight: 300; 
} 
#cssmenu > ul { 
    float: none; 
} 
#cssmenu ul { 
    background: #fff; 
} 
#cssmenu > ul > li { 
    border-left: 3px solid #d7d8da; 
} 
#cssmenu > ul > li > a { 
    padding: 10px 20px; 
} 
#cssmenu > ul > li:hover { 
    border-left: 3px solid #ff0040; 
} 
#cssmenu ul li:hover > a { 
    color: #ff0040; 
} 
#cssmenu > ul > li:hover { 
    background: #f6f6f6; 
} 

Answer 1

CSSには、.activeクラスはありません。おそらくそれらをCSSに追加するべきです。

変更

THIS：THIS TO

#cssmenu > ul > li:hover{ 
    border-left: 3px solid #ff0040; 
} 
#cssmenu ul li:hover > a{ 
    color: #ff0040; 
} 
#cssmenu > ul > li:hover{ 
    background: #f6f6f6; 
} 

：

#cssmenu > ul > li:hover, #cssmenu > ul > li.active { 
    border-left: 3px solid #ff0040; 
} 
#cssmenu ul li:hover > a, #cssmenu ul li.active > a { 
    color: #ff0040; 
} 
#cssmenu > ul > li:hover, #cssmenu > ul > li.active { 
    background: #f6f6f6; 
} 

Answer 2

私はどのcssがactiveクラスに適用され見ることができません。

li.active{ color: pink; } //Try using this 

Answer 3

jQueryプラグインやCSSのコードを追加し

CSS：

#cssmenu ul li.active a{ 
     background:pink; 
} 

HTMLコード：

<div id="cssmenu"> 
    <ul> 
    <li class="active"><a href="http://www.local-trends.com/cellphones--parts.html" onclick="myFunction(this)">Shop All</a></li> 
    <li><a href="#" onclick="myFunction(this)">Cell Phones & Smartphones</a></li> 
    <li><a href="#" onclick="myFunction(this)">Smart Watches</a></li> 
    <li><a href="#" onclick="myFunction(this)">Batteries</a></li> 
    <li><a href="#" onclick="myFunction(this)">Cases, Covers & Skins</a></li> 
    <li><a href="#" onclick="myFunction(this)">Chargers & Cradles</a></li> 
    <li><a href="#" onclick="myFunction(this)">Headsets</a></li> 
    <li><a href="#" onclick="myFunction(this)">Phone Cards & SIM Cards</a></li> 
    <li><a href="#" onclick="myFunction(this)">Cell Phone & Smartphone Parts</a></li> 
    </ul> 
    </div> 

機能コード：

<script> 
    function myFunction(tag) { 
     $("#cssmenu ul li.active").removeClass("active"); //remove previous li active class 
     $(tag).closest("li").addClass("active"); //set active class to clicked li 
     alert($(tag).text()); 
    } 
    </script>