垂直菜單（+子菜單）不自然地堆疊

Question

我正在製作一個響應式菜單，該菜單應該在桌面上水平並且在移動設備上垂直對齊。 雖然桌面版沒有問題，但移動版的行爲真的很奇怪。

所以這是移動菜單。第一級條目呈藍色，第二級呈灰色。在圖像上，即使其中有3個，也只能看到兩個二級條目。另一個問題是這些菜單位於菜單的最後，而不是在1st-Level條目下。

每一個元素都有

display: block; 
position: relative; 
float: left; 
width: 100%; 

有了它應該起碼堆得當，它沒有。由於它是我正在開發的框架的一部分，CSS文件相當龐大，可能不易閱讀。

http://codepen.io/anon/pen/JEPYYW

Answer 1

這可能不是你要找的答案，但我希望它能幫助反正...

就個人而言，我會使用（現在不那麼）新的CSS靈活盒佈局實現你想要的更容易，有一個很好的指導，在https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

本質上，您想要做的事情（顯然是其他選項）在桌面版網站上有flex-direction: column，並在移動視圖上將其切換爲row。這只是將菜單的方向從水平切換到垂直。

在我看來，這是做這件事最好的（也是最現代的）方法。然而，值得注意的是，有些人認爲瀏覽器支持不如更傳統的方法。這是真的，但如果你看看http://caniuse.com/#feat=flexbox，你會發現在現代瀏覽器中它可以正常工作。

我希望這是有用的，即使它不是直接解決您的問題！