수평 슬라이드 다운 메뉴가 수평 요소를 정렬하는 데 문제가 있습니다

Question

가로형으로 변환하려는 세로 형 아코디언 메뉴가 있습니다. 그 이유는 구조와 모든 하위 요소가 어떻게 부모보다 완벽하게 아래에 있는지입니다. 궁극적 인 목표는 모든 하위 요소를 아래로 내리고 하위 요소를 부모 요소 아래에 유지하는 슬라이드 다운 메뉴를 만드는 것입니다.

문제는 내가 최상위 레벨 li을 display:inline-block;으로 가져올 수 없다는 것입니다. 그들은 서로의 꼭대기에 앉아서 장군이 혼란스럽게 만듭니다. 이 html 구조의 becuase인가요?

JSfiddle

그리고 복제하기 위해 노력하고있어 물건의 종류의 example.

Answer 1

지금 일하고있어 :. http://jsfiddle.net/KcR8U/3/

난 그냥 이런 식으로 CSS가 업데이트되었습니다. 작동하지만 지금은 최상위 요소가 하위 수준 사람과 아래로 떨어질

#nav li{ 
    display: inline-block; 
    position:relative; 
} 
#nav li ul{ 
    /* other styles */ 
    position:absolute; 
    z-index: 100;  
}