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菜單中選擇

回答

相關問題