水平CSSメニューでUL LIを選択しました

Question

このメニューは水平メニュー用です。選択したliまたはa.liのCSSを生成する方法

HTML：

<ul class="arrowunderline"> 
<li><a href="#">Home</a></li> 
<li><a href="#">New</a></li> 
<li class="selected"><a href="#">Revised</a></li> <!-- IF a.LI selected <a class="selected" > END --> 
<li><a href="#">Tools</a></li> 
<li><a href="#">CSS</a></li> 
<li><a href="#">Forums</a></li> 
</ul> 

CSS：

ul.arrowunderline{ 
list-style-type:none; 
margin:0; 
padding:0; 
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */ 
font: bold 16px Georgia; 
    margin-top: 60px; 
} 

ul.arrowunderline li{ 
display:inline; 
margin-right:25px; /* spacing between each menu item */ 
} 

ul.arrowunderline li a{ 
position:relative; 
color:black; 
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */ 
text-decoration:none; 

} 

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */ 
content:''; 
position:absolute; 
left:50%; 
margin-left:-75px; 
    margin-top: -60px; 
width:150px; 
    height:40px; 
background:url(http://i.stack.imgur.com/7jpU4.png) center bottom no-repeat; 
} 

UPDATE：オンラインデモ：http://jsfiddle.net/uc6Yz/2/

Answer 1

あなたはこのを探していますか？

ul.arrowunderline li.selected { 
    //place your code here (to modify list item) 
} 

ul.arrowunderline li.selected a { 
    //place your code here (to modify the "a" item when li is selected) 
} 

あなたの質問はちょっと乾燥していますが、あなたはもう少し詳しく説明できますか？

Answer 2

あなたはこのを探している場合がございます。

// CSS

.selected{  
    background: red; 
} 

は、それぞれのページの<li>あなたにこのクラスを追加します。あなたがホームページにアクセスすると、ホームメニューが選択されます

<li class="selected"><a>Forums</a></li>

とするときに：私はあなたがホーム・ページにある場合、あなたの <li class="selected"><a>Home</a></li>に選択したクラスを追加説明したり、あなたはフォーラムのページにある場合、その後のように、それぞれの <li>に選択したクラスを追加してみましょうフォーラムページのフォーラムメニューにアクセスしてください。

はここで見つける：http://jsfiddle.net/KkP7J/

Answer 3

はあなたが永久に上部の境界線が右に選択することをしたいですか？

このためです。

$('.arrowunderline li').on('click', function(){ 
    $('.arrowunderline li').removeClass('selected'); 
    $(this).addClass('selected'); 
});