Родитель и братья и сестры наследуют стили дочерних элементов списка - PullRequest
Новая
       5

Родитель и братья и сестры наследуют стили дочерних элементов списка

1 голос
/ 11 мая 2010

У меня есть простое меню 

<ul id="menu">
<li class="leaf"><a href="#">Menu Item 1</a></li>
<li class="leaf"><a href="#">Menu Item 2</a></li>
<li class="expanded"><a href="#">Menu Item 3</a>
    <ul>
       <li class="leaf"><a href="#">Menu Item a</a></li>
       <li class="leaf"><a href="#">Menu Item b</a></li>
       <li class="leaf"><a href="#">Menu Item c</a></li>
   </ul>
</li>
<li class="leaf"><a href="#">Menu Item 4</a></li>
</ul>

и 

ul#menu li:hover {font-weight:bold;}

Проблема, с которой я сталкиваюсь, заключается в том, что когда я нахожусь выше ul li li , родитель и все его братья и сестры получают эффект парения. Мне нужен только элемент списка, который я указывал выше, чтобы получить эффект.

Я пытался ul#menu li.leaf:hover {..}, ul#menu li.expanded:hover {..}, но даже в этом случае, когда я нахожусь выше li.expanded, его потомок наследует стиль.

Для меня важно стилизовать элементы списка, а не a (стиль более сложный, чем тот, который я опубликовал)

Как мне это исправить?

Ответы [ 2 ]

0 голосов
/ 11 мая 2010 
#menu li:hover li { font-weight:normal }
#menu li:hover, #menu li li:hover {font-weight:bold;}

Первое правило не допускает выделение жирным шрифтом всех 2-го уровня при наведении родительского li. затем второе правило устанавливает только выделенные в данный момент li первого уровня и в настоящее время выделенные 2-го уровня жирным шрифтом.

0 голосов
/ 11 мая 2010

Я не совсем уверен, почему это может происходить, но я предполагаю, что вы пытаетесь собрать выпадающее меню на основе CSS?

Я бы порекомендовал вам проверить http://htmldog.com/articles/suckerfish/dropdowns/. Это отличная помощь, и я всегда основываю на ней выпадающие меню.

Похоже, ваша проблема - какая-то странная ошибка наследования - происходит ли она во всех браузерах?

...