UL LI selected in horizontal CSS menu

2
votes

I have This Menu For Horizontal Menu. How To generate css for selected li or 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;
}

UPDATE : Online Demo: http://jsfiddle.net/uc6Yz/2/

3
cssmenu
What do you mean by generating css? Don't you just need to use ul.arrowunderline li.selected? It is unclear what you need help with. – MMM
lol! ul.arrowunderline li.selected this is very basic@ my question. i know . how to generate is : ul.arrowunderline li.selected { //THIS IS GENERATE CSS } – Saimon Avazian
Sorry, I don't understand. Could you try rephrasing. Your sentence is very ambiguous and unclear. What do you mean by generating CSS? What are you using for CSS generation? What do you need help with? – MMM
Please See My Demo. When position:absolute; and content '' ... i dont any idea for ul.arrowunderline li.selected { //place your code here (to modify list item) }. in fact, What is produced is actually a bit complicated. i need to selected this menu. You Done ? UPDATE DEMO : jsfiddle.net/uc6Yz/2 – Saimon Avazian
No offence, but are you using Google Translator? I have a really hard time understanding what you mean. I still don't understand what needs to be done. – MMM

3 Answers

0
votes

Might be you are looking for this:

//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/

0
votes

You want that top border on permanent for selected right?

For this.

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

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?