부모의 위에 아이를 놓기

Question

안녕하세요 저는 CSS를 해결하는 방법을 알 수없는 문제가 있습니다. 문제를 해결할 방법이 있는지는 잘 모르겠지만 여기에 있습니다.

의 우리가이 HTML 있다고 가정 해 봅시다 :

<ul id="menu"> 
    <li> 
     <a href="#">Auto-moto, piese, accesorii<i class="icon-caret-right"></i></a> 
     <ul class="product-submenu"> 
       <li><a href="#"><i>Auto-moto, piese, accesorii</i> <span>Short description</span></a></li> 
       <li><a href="#"><i>Item</i><span>Short description</span></a></li> 
       <li><a href="#"><i>Auto-moto, piese, accesorii</i><span>Short description</span></a></li> 
       <li><a href="#"><i>Item</i><span>Short description</span></a></li> 
       <li><a href="#"><i>Item</i><span>Short description</span></a></li> 
     </ul> 
    </li> 
</ul> 

그리고이 CSS : 예를 들어 나는 위에로 UL 인증 번호 메뉴를 설정할 수 있도록하려는 것

ul#menu{ 
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25); 
    box-shadow:   5px 5px 5px 0px rgba(0, 0, 0, 0.25); 
    position:relative; 
} 
ul.product-submenu{ 
    position:absolute; 
} 

경우를 ul.product-submenu ul.product-submenu가 ul # menu의 자식이라는 사실을 어떻게 생각합니까?

태그가 형제 인 Z- 색인으로 쉽게 해결할 수 있지만이 경우에는 알아낼 수 없습니다.

내가 원하는 것이 무엇이 링크에서 바이올린 녹색 하나 상단에 빨간색 컨테이너를 설정 할 수 있습니다 추가 : 당신이 ul.product에 20 픽셀을 추가하는 경우 fiddle

Answer 1

씨 리스터의 제안 작품 -submenu의 top 속성을 선택하면 서브 메뉴가 나타납니다.

JSFiddle는 :http://jsfiddle.net/5rmgR/3/

ul.product-submenu{ 
    position:absolute; 
    background-color:green; 
    top:20px; 
    left:100px; 
    z-index:-1; 
} 

당신은 방금 상단 속성에 20 픽셀을 추가 할 경우 Z- 인덱스없이 멀리 얻을 수 있습니다. JSFiddle : 당신이 용어의 다른 의미 상단에있을 메뉴를 원하는 경우

, 당신은 이런 식으로 뭔가를 시도 할 수http://jsfiddle.net/5rmgR/6/

ul#menu{ 
    background-color:red; 
} 
ul.product-submenu{ 
    position:relative; 
    background-color:green; 
    top:0; 
    left:100px; 
    width: 50%; 
    z-index: -1; 
}