CSS 하위 메뉴

나는 탐색이 그 테두리는 부모 LI 요소의 맨 위에 있습니다. LI 요소가 하위 컨테이너 하위 요소의 TOP에 있어야합니다. 그래서 그들은 "병합"된 것처럼 보일 것입니다.CSS 하위 메뉴

FireFox에서 완벽하게 작동하는 z-index -1 해결책을 시도했지만 Chrome에서 충돌이 발생합니다.

스크린 샷 : 이것은 내 CSS 코드가 enter image description here

입니다 :

#topBarHeader nav ul.main-nav { 
    list-style: none; 
    position: absolute; 
    left:0; 
    display: inline-block; 
    z-index: 100; 
} 
#topBarHeader nav ul.main-nav > li { 
    float: left; 
    display: inline-block; 
    padding: 15px 17px 10px 17px; 
    border: 1px solid rgba(255, 255, 255, 0); 
    margin-right: 10px; 
} 
#topBarHeader nav li .sub-container { 
    position: absolute; 
    top: 49px; 
    left: 0px; 
    width: 640px; 
    opacity: 0; 
    visibility: hidden; 
    overflow: scroll; 
    overflow-x: hidden; 
    height: 380px; 
    background: white; 
    z-index: -1; 
    border: 1px solid #d5dbdf; 

} 
#topBarHeader nav li:hover > .sub-container { 
    opacity: 1; 
    visibility: visible; 
}

Here is the link to my page menu. (나쁜 서버, 아주 천천히.) 당신은 부모 <li> 요소에 position: relative를 선언하려고한다

출처

2013-09-21 user1736479

귀하의 CSS가 HTML과 메쉬하지 않는 것 ... 문제 문이 완전하지 않습니다. –

@ user1736479 http://jsfiddle.net/에서 전체 코드를 삽입 할 수 있으므로 다른 사람들이 자세한 정보를 얻을 수 있습니다. –

그렇지 않으면 절대 위치가 제대로 작동하지 않을 수 있습니다.

나는 이것이 Chrome의 버그라고 말하지 않지만 정보가 충분하지 않을 때 다양한 브라우저가 모호한 규칙을 처리하는 방법과 비슷합니다.

[편집] : 나는 내가 지금 당신의 문제를 이해 생각한다. 위쪽 테두리를 활성 탭 뒤에 표시하는 트릭은 실제로 <li>의 내용을 래핑 한 다음 드롭 다운 내용에 비해 더 높은 z- 인덱스를 할당하고 배경과 일치하도록 아래쪽 테두리 색을 변경하는 것입니다. 사라진다. 여기

는 개념 증명으로 바이올린입니다 - http://jsfiddle.net/teddyrised/EPYvq/가

출처

2013-09-21 19:11:38 Terry

감사합니다. 나는 그것을 시도했지만 작동하지 않습니다. 하위 컨테이너는 여전히 Chrome에서 백그라운드를 잃고 있습니다. :( – user1736479

백그라운드 속성이 올바르게 선언 되었습니까? 그리고 음수 인 z- 인덱스를 사용하고 있습니까? – Terry

CSS 하위 메뉴

답변

관련 문제