하위 메뉴가있는 CSS 드롭 다운 메뉴

Question

모든 하위 메뉴가 모든 하위 메뉴 상위 항목이 아닌 같은 위치에 나타나는 수평 드롭 다운 메뉴를 만들려고합니다. 나는 자바 스크립트없이이를 만들고 싶어이 내가 지금 무슨 짓을의 예입니다 (그냥 일반 CSS의 드롭 다운 메뉴의) :

http://jsfiddle.net/pEdaE/

그럼 내가 링크 몇 가지 코드를 게시해야한다 그래서 나는이 블록을 포착

.main_menu ul { 
    background-color: #efffc7; 
    display: none; 
    z-index: 100; 
    width: 980px; 
    height: 324px; 
    left:0; 
    position: absolute; 
} 

이 하위 메뉴에 대한 CSS를,하지만 난 절대 또는 상대 위치로 위치 할 때, 그것은 단지 그의 부모 DIV에 배치됩니다 : 당신을 표시합니다. 나는 고정 된 위치를 사용하려했지만, 그다지 좋지 않습니다.

이 질문에 대한 답변이 이미 있지만 죄송합니다. CSS 만 사용하여이 작업을 수행 할 수 있기를 바랍니다.

감사

편집 : 관련된 사람들 덕분에 만든 메뉴는이 FIDDLE

Answer 1

아주 흥미로운 상황에서 찾을 수 있습니다

. 나는 약간의 주위에 팝업을 움직일 수있는 유연성을 가지고 있다는 생각을 좋아한다. 그리고 CBroe의 훌륭한 코멘트는 나에게 이것을 내놓을 수있게 해준다. FIDDLE.

CSS - "홀더"ul로 이동하여 상대적인 위치를 지정하십시오.

#nav { 
    position: relative; 
} 

CSS는 - 그 절대적 요소를 "공중 선회"위치 :

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display: block; 
    position: absolute; 
    top: 50px; 
    left: 150px; 
} 

정말 감사합니다 CBroe을!