CSS에서 부모 ul 뒤의 자식 ul

Question

순수 CSS3로 내 드롭 다운 메뉴를 만들려고하지만 내 자식 ul이 부모 위에 계속 표시됩니다. z-index -100으로 시도했지만 부모 ul에서 긍정적 인 z-index 값을 제거했지만 아무 일도 발생하지 않습니다. 내가 여기 fiddle 업데이트되었습니다

http://jsfiddle.net/z9kCx/

Answer 1

:

이

내 코드입니다. 그게 효과가 있니?

나는 당신의 ul s의 메뉴와 하위 메뉴 클래스를 추가하고 CSS를 조금 편집 :

ul.menu li { 
    position: relative; 
    width: 100px; 
    float: left; 
    background: #2A2A2A; 
    text-align: center; 
    font-size: 14px; 
    padding: 15px; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
    list-style-type: none; 
} 

ul.sub-menu { 
    padding: 0; 
    position: absolute; 
    top: 45px; 
    left: 0; 
    width: 145px; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
} 

ul.menu li:hover > .sub-menu { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

을