광고 항목이 다르게 동작합니다.

Question

정렬되지 않은 목록 내에서 정렬되지 않은 목록이있는 탐색을 작성하고 있습니다. 필자는 정렬되지 않은 주 목록의 스타일이 하위 목록의 스타일과 뒤섞여 있다고 의심합니다. 아마도 내 셀렉터가 최선이 아닐 수도 있습니다. 내비게이션은 여기에서 볼 수 있습니다 : http://jsfiddle.net/W3Dzd/

내가 가지고있는 두 가지 문제점은 1) "sui generis"의 첫 번째 항목이 다른 것보다 얇습니다 - 그 상자가 다르게 표시되는 사각형입니다. 2) 마우스를 올렸을 때 하위 탐색 줄 항목 "맨틀"은 "sui generis"아래의 앵커 텍스트를 가리키면 색상이 바뀌지 않습니다.

누군가 내가 올바른 방향으로 안내 할 수 있습니까? 더 나은 선택자를 사용할 수 있습니까?

Answer 1

첫 번째 문제는 규칙에서 오는 : 나는의 목적을 이해하지만, 그것을 제거하면 문제가 해결되지 않는

.subnav li:first-child > a { 
    padding-bottom: 2.5px; 
} 

. 그것은 "벽난로"를하고있다

.navigation li:first-child + li + li:hover > a, .navigation li:first-child + li + li + li + li + li + li:hover > a { 
    color: white; 
} 

규칙이 공중 선회되고있는 li의 직접적인 아이가 어떤 a를 지정하기 때문에 텍스트가 흰색 유지 :

---

두 번째 문제는이 규칙에서 온다 이상은 li인데, 이는 일부 조상인데 반드시 부모가 아니라 navigation 인 부모가 아닙니다. 이제, >.navigation 후 수정 문제를 넣어,하지만 난 대안을 제안 :

을 대신 최상위 li 클래스 내부의 ul을주는의 li 자체에 그 클래스를 넣어. 그럼 훨씬 단순한 규칙을 가질 수 있습니다.

.navigation li.has-subnav:hover { 
    background: #80A353; 
} 
.navigation li.has-subnav:hover > a { 
    color: white; 
} 

희망이 있습니다. 아, 또한 배경 이미지 대신 서브 네비게이션 항목 사이에 구분 기호를 사용하기 위해 테두리 만 사용하는 것을 고려할 것입니다.