html - 行中的嵌套列表 - CSS

Question

我正在尝试创建一个导航菜单。我希望子菜单在其父列表项下显示为行，如下所示( block 版本!):

期望结果图:

问题是我很难像这样显示它们。

我在这里整理了一个 jsfiddle:http://jsfiddle.net/8skzF/

如您所见，它按顺序列出了所有 li，但我希望 list item 2 的子列表显示为一行在前 4 个列表项下。

这可能吗？如果是这样，有什么指示吗？

[编辑]

为了帮助解释最终结果，这是我将创建的最终阶段的另一张图片。

最终结果图:

如您所见，我只想对列表进行布局，然后我将使用 jQuery 通过滑动动画显示/隐藏子列表等...

我希望这有助于解释我最终想要实现的目标。

[编辑 2]

我还有一点。我添加了更多列表项以尝试使其更具可扩展性。

我基本上给顶行一个底边距以将其向下推，并使子列表绝对定位。

我现在卡住的地方是第一个子列表是否有 2 行深。

我计划然后使用 jQuery 来显示/隐藏子列表。

这是我的 jsFiddle:http://jsfiddle.net/8skzF/20/

Answer 1

#main-list ul li{
    background-color: green;
    margin: 0;
    padding: 0;
    position:relative;
    z-index:100;
 }
 #sub-list-1,
 #sub-list-2{border: 1px solid #FF0000;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 157px;
    z-index: 1;display:none;cursor:pointer;}
  #sub-list-1 li,
  #sub-list-2 li{
   float:none;    
}
#main-list li:hover + #sub-list-1,
#main-list li:hover + #sub-list-2{
     display:block;
}