탐색 바 목록 너비

Question

지금 탐색 모음을 만들려고합니다. 탐색의 주요 요소의 너비는 자동으로 설정해야하지만 하위 요소는 모두 고정 너비가되어야합니다. 목록이 만들어지는 방식은 다음과 같습니다.

<li>Main Element 
     <ul> 
     <li> Sub Element </li> 
     <li> Sub Element </li> 
     <li> Sub Element </li> 
     </ul> 
    </li> 

이 작업은 각 주 메뉴 항목과 하위 메뉴 항목에 대해 반복됩니다.

내가 겪고있는 문제는 너비가 100px가되는 하위 요소에 대해 CSS를 사용하고 싶지만 기본 요소는 텍스트 크기와 같고 왼쪽 및 오른쪽 모두에 10px의 여백을 더한 것입니다. 둘을 변경하지 않고도 클래스를 분리하려고 시도한 후에도 변경할 수없는 것으로 보입니다. 또한 내 외부 스타일 시트에 ul li 및 li ul 스타일을 편집 해 보았습니다. 모든 도움을 위해 미리 감사드립니다.

Answer 1

ul li은 모두 ul 아래의 모든 레벨에서 모든 li에 영향을 미칩니다. ul > li은 ul의 직접 하위 인 li에만 영향을줍니다. 그것은 아이의 콤비라고 : http://www.w3.org/TR/css3-selectors/#child-combinators

당신이 (실제로는 IMO에서 더 나은 방법이 될 것이다 클래스를 사용하여 - http://www.jsfiddle.net/joplomacedo/xeWA4) 클래스를 사용하지 않고 일어날 수 있도록하는 경우 당신은 그것을 사용해야합니다

트릭 당신이 원하는 스타일을 적용됩니다 주 메뉴 항목에 ul > li 아래에 적용한 다음 ul ul > li에 우선합니다. 여기에 바이올린입니다 - http://jsfiddle.net/joplomacedo/xeWA4/3/

편집 :
당신은 실제로 모든 자식 콤비를 사용할 필요가 없습니다. 자녀가 처음으로 질문을 읽을 때 자식 연결자가 내 마음에 들었습니다. 나는 그 용도에 대해 결코 의문의 여지가 없었습니다. 따라서 ul ul li에 의해 재정의 된 ul li도 완벽하게 작동하며 더 간단하게 유지됩니다.