我正在制作一个响应式菜单，该菜单在桌面上应该是水平的，而在移动设备上应该是垂直对齐的。 虽然桌面版没有问题，但移动版的行为真的很奇怪。
这是移动菜单。一级条目为蓝色，二级条目为灰色。在图像上你只能看到两个二级条目，即使有 3 个。另一个问题是这些位于菜单的最后，而不是在第一级条目下。
每个元素都有
display: block;
position: relative;
float: left;
width: 100%;
有了它，它至少应该正确堆叠，但事实并非如此。由于它是我正在处理的框架的一部分，因此 CSS 文件相当大，可能不容易阅读。
最佳答案
这可能不是您要找的答案，但无论如何我希望它对您有所帮助...
就个人而言，我会使用(现在不是这样)新的 CSS 灵活框布局来更轻松地实现您想要的，在 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 上有一个很好的指南。 .
基本上，您想要做的(显然还有其他选项)是在桌面站点上设置 flex-direction: column 并将其切换到 row移动 View 。这只是将菜单的方向从水平方向切换为垂直方向。
在我看来，这是最好的(也是最现代的)方法。但是，值得注意的是，有些人会争辩说浏览器支持不如更传统的方法。这是真的，但如果你看看http://caniuse.com/#feat=flexbox ，您会发现它在现代浏览器中运行良好。
我希望这对您有用，即使它不能直接解决您的问题!
关于html - 垂直菜单(+ 子菜单)堆叠不自然，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41403890/