垂直菜单（+子菜单）不自然地堆叠 [英] Vertical Menu (+ Sub-Menu) stacks unnaturally

问题描述

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

I'm making an responsive menu which should be horizontal on desktop and align vertically on mobile. While the Desktop-Version has no issues, the Mobile one behaves really strange.

所以这是手机菜单。一级条目为蓝色，二级为灰色。在图像上，你只能看到两个二级条目，即使有3个。另一个问题是，这些是在菜单的最后，而不是一级条目下。

So this is the mobile menu. The 1st-Level Entries are in blue, 2nd-Level in gray. On the image you can only see two of the 2nd-Level entries even if there're 3 of them. Another issue is that these are at the very end of the menu, rather than under the 1st-Level entry.

每个元素都有

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

它至少应该在堆栈正确，它不是。因为它是我工作的框架的一部分，CSS文件是相当庞大，可能不容易阅读。

With that it should at the very least stack properly, which it doesn't. Since it's part of the framework I'm working on, the CSS-File is rather huge and may not be easy to read.

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

推荐答案

这可能不是你想要的答案，但我希望它帮助反正...

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

Personally, I would use the (now not so) new CSS Flexible Box Layout to achieve what you want much more easily, there's a great guide to it at https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

基本上，你想要做的（显然是其他选项）在桌面版网站上有 flex-direction：column 并在移动视图上将其切换到行。这简单地将菜单的方向从水平切换到垂直。

Essentially, what you'll want to do (among other options obviously) is have flex-direction: column on the desktop site and switch that to row on the mobile view. This simply switches the orientation of the menu from horizontal to vertical.

在我看来，这是最好的（最现代的）这样做。然而，值得注意的是，有些人会认为浏览器支持不如更传统的方法。这是真的，但如果您查看 http://caniuse.com/#feat=flexbox ，你会看到在现代浏览器它的工作正常。

In my opinion this is the best (and most modern) way of doing this. However, it is worth noting that some would argue that browser support isn't as good as more traditional methods. This is true, but if you look at http://caniuse.com/#feat=flexbox, you'll see that in modern browsers it works fine.

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

I hope this is useful even though it's not a direct solution to your problem!

这篇关于垂直菜单（+子菜单）不自然地堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！