重新排列CSS下拉菜单

Question

我正在关注a tutorial to make a css dropdown menu。但我想知道是否有办法让它出现在左侧，一个按钮位于另一个的顶部，而不是顶部，按钮彼此相邻。

Answer 1

如果您正在使用教程学习，为什么不直接按照垂直菜单教程？菜单中的项目不仅定位不同，而且儿童元素的定位也会有很大不同。如果你像你一样创建水平菜单，即使将元素放在彼此的顶部，这些子元素将会覆盖其他菜单项，如果他们的父项被徘徊/点击时它们仍然具有相同的“下拉” 。

下面是一个垂直菜单教程的例子，但有吨。 http://www.devinrolsen.com/pure-css-vertical-menu/

Answer 2

您将要删除或修改这个CSS属性：

nav ul li { 
    float: none; 
} 

Answer 3

我基于您提供的链路上的垂直菜单做了jsFiddle。我删除了所有的花式渐变，填充和圆角，只使用了一点颜色，其余都是CSS。

每个菜单项可以用这个CSS子菜单的根：

nav li { 
    position: relative; 
} 
nav ul ul { 
    position: absolute; 
    top: 0; 
    left: 100%; 
} 

这样你就可以用任意深度创建菜单。