Vertical Menu (+ Sub-Menu) stacks unnaturally

问题:

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.

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.

Every element has

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

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

回答1:

This may not be the answer you're looking for but I hope it helps anyway...

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/.

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.

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!