중첩 된 UL의 Z- 색인

Question

CSS- 메뉴에서 z- 색인에 문제가 있습니다. 중첩 된 ul 태그가있는 메뉴를 만들었습니다.

분명히 첫 번째 ul은 메뉴 계층에서 첫 번째 수준입니다. 이 첫 번째 ul의 배경 속성으로 그라디언트와 상자 그림자를 설정했습니다. CSS는 물론 모두 포함되어 있습니다.

두 번째 ul (중첩 된 것)은 메뉴 계층의 두 번째 수준입니다. 나는 배경색을 회색으로했다.

아쉽게도 두 번째 ul은 첫 번째 ul을 오버레이합니다. 나는 Z-index로 놀려고했지만, 제대로 작동하지 않습니다. 첫 번째 ul의 그림자를 중첩 된 ul 위로 가져 가고 싶습니다. 당신이 그것을 재현 할 수 있도록 여기에

코드입니다 :

CSS :

<ul class="menu"> 
    <li><a href="#">ONE</a> 
    <ul> 
     <li><a href="#">SUB_ONE</a></li> 
     <li><a href="#">SUB_TWO</a></li> 
     <li><a href="#">SUB_THREE</a></li> 
    </ul> 
    </li> 
    <li><a href="#">TWO</a></li> 
    <li><a href="#">THREE</a></li> 
</ul> 

첫 번째 UL은 오버레이 것을 어떤 방법이 있나요 : 여기

ul.menu { 
    /* Gradient: */ 
    background: #444; 
    background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777)); 
    background: -moz-linear-gradient(top, #999, #777); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#777'); 
    height: 25px; 
    /* Box-Shadow: */ 
    -moz-box-shadow: 1px 3px 3px #888; 
    -webkit-box-shadow: 1px 3px 3px #888; 
    box-shadow: 1px 2px 3px #888; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
    position: relative; 
    z-index: 20; 
} 

ul.menu, ul.menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

ul.menu a { 
    display: block; 
    text-decoration: none; 
    color: #000; 
    line-height: 22px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

ul.menu li { 
    padding:0; 
    margin:0; 
    float:left; 
} 

ul.menu ul { 
    margin-left: 15px; 
    padding: 0; 
    position: absolute; 
    display: none; 
    background-color: #CCC; 
    z-index: 10; 
} 

ul.menu li:hover ul { 
    display: block; 
} 

ul.menu ul li { 
    float: none; 
} 

는 HTML입니다 두 번째 ul 또는 그것은 단지 가능하지 않은가? 어떤 도움을 주셔서 감사합니다!

감사합니다, 마이크

몇 가지 테스트 후

Answer 1

해결 방법이 있습니다. 자체 그림자가있는 중첩 된 UL 위에 DIV를 삽입하면 하위 메뉴 상단에 DIV를 가져올 수 있습니다.

참조 : 유망한보고하지 http://jsfiddle.net/SLkrN/6/

Answer 2

짧은 대답은 것으로 나타납니다 .menuul 그들을 Z- 인덱스 변경에 응답하지 일으키는 경우에도 떠있는 모든 요소, 부모의 서브 메뉴의 봉쇄를 설정 상대적으로 부모 UL보다 낮아지지 않습니다. 나는 계속 실험 할 것이다. 그러나 적어도 하위 메뉴를 하위에 배치하면 부모의 하단에 적어도 인라인으로 표시되도록 제안 할 수 있습니까? ul?

ul.menu ul { 
    margin-left: 15px; 
    margin-top: 5px; 
    padding: 0; 
    position: absolute; 
    display: none; 
    background-color: #CCC; 
    z-index: 10; 
}