jquery - 水平向下滑动菜单麻烦水平对齐元素

Question

我有一个垂直的手风琴菜单，我想将其翻译成水平格式。其原因是结构以及所有子元素如何完美地排列在其父元素之下。最终目标是有一个向下滑动的菜单，可以向下滑动所有子元素，并且它们在其父元素下保持对齐。

问题是我无法将顶级li元素添加到display:inline-block;. 他们坐在一起，一般会弄得一团糟。这是因为html结构吗？

JSfiddle

还有一个我试图复制的例子。

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