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

У меня есть это меню для горизонтального меню. Как сгенерировать css для выбранных li или a.li.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

lol! 'ul.arrowunderline li.selected' это очень простой @ мой вопрос. я знаю . как сгенерировать: 'ul.arrowunderline li.selected' { ' // ЭТО ГЕНЕРАЛЬНЫЙ CSS ' } –

Извините, я не понимаю. Не могли бы вы перефразировать. Ваше предложение очень неоднозначно и неясно. Что вы понимаете, генерируя CSS? Что вы используете для генерации CSS? Как я могу вам помочь? – MMM

-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 '' '... i dont любая идея для' ul.arrowunderline li.selected { // размещаем ваш код здесь (чтобы изменить элемент списка) } '. на самом деле, то, что производится, на самом деле немного сложно. –

UPDATE DEMO: http://jsfiddle.net/uc6Yz/2/ –

Может быть вы ищете это:

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

ответ

Смежные вопросы