重新排列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%; 
} 

這樣你就可以用任意深度創建菜單。