UL LI在水平CSS菜单中选择

我有这个菜单水平菜单。如何为选定的li或a.li生成css。UL 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/

来源

2012-03-07 Saimon Avazian

你是什么意思产生css？你不是只需要使用'ul.arrowunderline li.selected'？目前还不清楚你需要什么帮助。 – MMM 2012-03-07 10:08:07

哈哈！ 'ul.arrowunderline li.selected'这是非常基本的@我的问题。我知道。如何生成是：'ul.arrowunderline li.selected' {0}这是生成CSS' } – 2012-03-07 10:17:04

对不起，我不明白。你可以尝试改说。你的句子非常含糊而且不清楚。你是什么意思生成CSS？你用什么CSS代？你有什么需要帮助的？ – MMM 2012-03-07 10:20:12

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

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

来源

2012-03-07 10:07:09

请看我的演示。当'position：absolute;''和content'''...我不知道'ul.arrowunderline li.selected { //将代码放在这里（修改列表项） }'。实际上，产生的东西实际上有点复杂。 – 2012-03-07 10:44:25

UPDATE DEMO：http://jsfiddle.net/uc6Yz/2/ – 2012-03-07 10:50:43

可能是你正在寻找这样的：

// CSS

.selected{  
    background: red; 
}

这个类添加到您的相应页面的<li>。让我来解释一下，如果你在首页添加选定类的<li class="selected"><a>Home</a></li>或者如果您在论坛页面，然后添加选定类各<li>像：<li class="selected"><a>Forums</a></li>

当你的主页上访问的主菜单都被选择，当你访问论坛页面论坛菜单中选择。

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

来源

2013-04-25 12:58:05

你想要一个永久的上边框选择权？

为此。

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

来源

2015-04-16 07:14:54

UL LI在水平CSS菜单中选择

回答

相关问题