垂直菜单（+ 子菜单）堆叠不自然答案

【问题标题】：Vertical Menu (+ Sub-Menu) stacks unnaturally垂直菜单（+ 子菜单）堆叠不自然
【发布时间】：2016-12-31 07:29:49
【问题描述】：

我正在制作一个响应式菜单，它在桌面上应该是水平的，在移动设备上应该是垂直对齐的。虽然桌面版没有问题，但移动版的行为确实很奇怪。

这就是移动菜单。第一级条目为蓝色，第二级为灰色。在图像上您只能看到两个 2nd-Level 条目，即使它们有 3 个。另一个问题是这些位于菜单的最后，而不是在 1st-Level 条目下。

每个元素都有

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

这样，它至少应该正确堆叠，但事实并非如此。由于它是我正在开发的框架的一部分，因此 CSS 文件相当大，可能不容易阅读。

【问题讨论】：

标签： html css sass

【解决方案1】：

这可能不是您正在寻找的答案，但我希望它对您有所帮助...

就个人而言，我会使用（现在不是这样）新的 CSS 灵活框布局来更轻松地实现您想要的，https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 有一个很好的指南。

基本上，您想要做的（显然还有其他选项）是在桌面站点上使用flex-direction: column，然后在移动视图上将其切换为row。这只是将菜单的方向从水平切换到垂直。

在我看来，这是最好的（也是最现代的）方法。然而，值得注意的是，有些人会认为浏览器支持不如更传统的方法好。确实如此，但如果您查看http://caniuse.com/#feat=flexbox，您会发现在现代浏览器中它运行良好。

我希望这很有用，即使它不能直接解决您的问题！

【讨论】：