부모와 형제 자매 내가 간단한 메뉴가

Question

자식 목록 항목의 스타일을 상속

<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.expanded 위를 가리면 아이가 스타일을 상속합니다.

나 목록 항목,하지 a 스타일을하는 것이

가 어떻게이 문제를 해결합니까 (스타일이 내가 게시 한 것보다 더 복잡하다) 중요한가?

Answer 1

왜 이런 일이 일어날 지 모르겠지만 CSS 기반 드롭 다운 메뉴를 만들려고한다고 가정합니다.

http://htmldog.com/articles/suckerfish/dropdowns/을 확인하는 것이 좋습니다. 그것은 큰 도움이되며, 나는 항상 드롭 다운 메뉴를 사용합니다.

문제와 같은 사운드는 이상한 상속 버그입니다. 모든 브라우저에서 발생합니까?

Answer 2

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

첫 번째 규칙은 부모 li이 떠있을 때 모든 2 레벨 li의 굵게를 방지합니다. 두 번째 규칙은 현재 잡혀있는 1 레벨의 li과 현재의 2 레벨의 li 만 굵은 글씨로 설정합니다.