Question

我正在制作一个响应式菜单，该菜单应该在桌面上是水平的，并在移动设备上垂直对齐。虽然桌面版本没有问题，但移动版本表现得非常奇怪。

所以这是移动菜单。第一级参赛作品为蓝色，二级参赛作品为灰色。在图像上，您只能看到两个二级条目，即使其中有三个条目。另一个问题是它们位于菜单的最后，而不是在第一级菜单下。

每个元素都有

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

因此它应该至少堆叠得恰到好处，但它并没有。由于它是我正在研究的框架的一部分，因此CSS文件相当庞大，可能不容易阅读。

Answer 1

这可能不是您正在寻找的答案，但我希望无论如何都有帮助......

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

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

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

我希望这很有用，即使它不是你问题的直接解决方案！