水平'子菜单'导航

我正在建立一个网站，从设计发送给我，但无法确定如何创建水平子菜单。如果您现在查看网站，您会看到ABOUT菜单项包含虚拟子页面/链接。子菜单垂直下降。我怎样才能让它像附加的截图一样是水平的？水平'子菜单'导航

这里是的jsfiddle：jsfiddle.net/huwrowlands/2sQbn（基本代码）

由于在li元素

enter image description here

使用display:inline-block;或float:left;。就像你在另一个ul上一样。

e.g：

.nav ul li ul li {float: left}

或

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

2014-01-15 14:06:45 Albzi

宽度尝试这样做。问题是孩子被父宽度所包含。所以子菜单不会比'about'li的宽度更远。 –

http://jsfiddle.net/huwrowlands/2sQbn/ –

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

.nav ul li ul li {float: left}

和删除从.SUB菜单

2014-01-15 14:09:25 giker

试过这个。问题是孩子被父宽度所包含。所以子菜单不会比'about'li的宽度更远。 –

复制你的标记和CSS在这里http://jsfiddle.net – giker

http://jsfiddle.net/huwrowlands/2sQbn/ –

回答