Jquery 使导航在悬停时并排显示

我希望默认情况下隐藏的嵌套列表显示在原始导航列表的一侧。这看起来类似于列表的两列，但当将鼠标悬停在特定的列表元素上时，第二列将用嵌套的列表内容填充自己

我开始研究这个问题，但意识到我不知道如何使用纯CSS，而不是实际创建两个div。这是我到目前为止的代码，它有严重的缺陷

...

显示子列表不需要javascript，请使用CSS3=）

代码：http://jsfiddle.net/sg6MX/2/

nav ul li:hover ul {
    display: block;
}

nav li ul:hover {
    display:block;
}

---

谢谢你的快速回答。但它似乎是从第一个列表元素所在的位置开始扩展的，而不是从导航菜单的顶部。如何使它在视觉上类似于两个相邻的文本分区？另外，当我单击其中一个嵌套列表项时，它会消失，因为另一个元素不再悬停在上面。我该如何解决这个问题？解决悬停问题的方法是，使嵌套列表的文本顶部与原始导航文本相同。使用这种样式，可用性可能会变得更差，最好先改进样式。看菜单，最好呆在LII旁边。LII最近做了这个小提琴，它可能会帮助你：这个看起来怎么样？--我还想让你知道，桌面上的悬停效果确实很酷，但它对移动设备不起作用。。在这种情况下，您应该使用媒体查询将其切换到onclick事件。

nav ul li:hover ul {
    display: block;
}

nav li ul:hover {
    display:block;
}