Css 水平“子菜单”导航

我正在建立一个网站，从一个设计发送给我，但我有困难想出如何创建一个水平子菜单。如果您现在查看站点，您将看到“关于”菜单项具有虚拟子页面/链接。子菜单垂直下拉。我怎样才能让它像附加的屏幕截图一样水平

链接：

下面是jsfiddle:jsfiddle.net/huwrowlands/2sQbn基本代码

谢谢

使用显示：内联块；或浮动：左；关于李元素。就像你在另一个ul上一样

e、 g:

或

---

您需要在下拉菜单中浮动元素

.nav ul li ul li {float: left}

---

并从中删除宽度。子菜单尝试了此操作。问题是子项包含在父项宽度中。所以子菜单不会超出“about”li的宽度。尝试了这个。问题是子项包含在父项宽度中。因此，子菜单的宽度不会超过“about”li的宽度。

.nav ul li ul li {display:inline-block;}

.nav ul li ul li {float: left}