水平滑動下拉菜單水平排列元素故障排列元素

Question

我有一個垂直手風琴菜單，我想將其轉換爲水平格式。其原因在於結構以及所有子元素如何完全在父母之下。 最終目標是有一個向下滑動的菜單，可以滑下所有子元素，並保持與其父元素一致。

問題是我無法獲得頂級li元素爲display:inline-block;。他們坐在一起，一般會弄得一團糟。這是因爲html結構嗎？

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;  
}