在水平CSS菜单中选择UL LI

I have This Menu For Horizontal Menu. How To generate css for selected li or a.li.

我有这个水平菜单菜单。如何为选定的li或a.li生成css。

HTML :

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:

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 : Online Demo: http://jsfiddle.net/uc6Yz/2/

更新：在线演示：http：//jsfiddle.net/uc6Yz/2/

3 个解决方案

#1

Might be you are looking for this:

你可能正在寻找这个：

//CSS

// CSS

.selected{    
    background: red;
}

add this class to your <li> of respective page. let me explain if you are in home page add selected class to your <li class="selected"><a>Home</a></li> OR if you are in Forums page then add selected class to respective <li> like: <li class="selected"><a>Forums</a></li>

将此类添加到相应页面的

。让我解释一下，如果您在主页中将所选课程添加到

主页或者如果您在论坛页面中，则将所选课程添加到相应的

喜欢：

论坛

When you visit on home page the home menu get selected and when you visit on forum page forum menu get selected.

当您在主页*问时，主菜单被选中，当您在论坛页面*问时，论坛菜单被选中。

find here: http://jsfiddle.net/KkP7J/

在这里找到：http：//jsfiddle.net/KkP7J/

#2

You want that top border on permanent for selected right?

您希望选定的顶部边框是永久性的吗？

For this.

为了这。

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

#3

-1

are you looking for this?

你在找这个吗？

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

your question is a bit too dry, can you explain yourself al little bit more?

你的问题有点太干了，你能解释一下自己多一点吗？

#1