UL LI выбран в горизонтальном меню CSS

Question

У меня есть это меню для горизонтального меню.Как сгенерировать CSS для выбранных li или a.li.

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;
}

ОБНОВЛЕНИЕ: Онлайн-демонстрация: http://jsfiddle.net/uc6Yz/2/

Answer 1

Возможно, вы ищете это:

// CSS

.selected{    
    background: red;
}

добавьте этот класс в <li> соответствующей страницы.позвольте мне объяснить, если вы находитесь на домашней странице, добавьте выбранный класс на ваш <li class="selected"><a>Home</a></li> ИЛИ если вы находитесь на странице форумов, то добавьте выбранный класс к соответствующему <li>, например: <li class="selected"><a>Forums</a></li>

Когда вы заходите на домашнюю страницуГлавное меню выбирается, и когда вы заходите на страницу форума, выбирается меню форума.

найти здесь: http://jsfiddle.net/KkP7J/

Answer 2

Вы хотите эту верхнюю границу перманента для выбранного права?

Для этого.

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

Answer 3

вы ищете это?

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)
}

ваш вопрос слишком сух, можете ли вы объяснить себя немного больше?