水平滑动菜单水平地解决元素问题

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