Вертикальное меню (+ подменю) неестественно стекирует

Question

Я создаю отзывчивое меню, которое должно быть горизонтальным на рабочем столе и вертикально совмещаться на мобильном телефоне. Несмотря на то, что версия Desktop не имеет проблем, Mobile работает очень странно.

Так что это мобильное меню. Записи 1-го уровня имеют синий цвет, 2-й уровень - серый. На изображении вы можете видеть только две записи 2-го уровня, даже если их 3. Другая проблема заключается в том, что они находятся в самом конце меню, а не под входом 1-го уровня.

Каждый элемент имеет

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

С, что он должен по крайней мере, складывается надлежащим образом, что он не делает. Поскольку это часть структуры, над которой я работаю, CSS-файл довольно большой и может быть нелегким для чтения.

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

Answer 1

Это не может быть ответ, который вы ищете, но я надеюсь, что это помогает в любом случае ...

Лично я хотел бы использовать (теперь не так) новый CSS Гибкая вставка Макет для достижения того, что вы хотите гораздо легче, есть отличный справочник по нему: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

По существу, то, что вы хотите сделать (среди прочих вариантов, очевидно), имеет flex-direction: column на рабочем столе и переключает его на row на мобильный вид. Это просто переключает ориентацию меню с горизонтального на вертикальное.

По-моему, это лучший (и самый современный) способ сделать это. Однако стоит отметить, что некоторые утверждают, что поддержка браузера не так хороша, как более традиционные методы. Это правда, но если вы посмотрите на http://caniuse.com/#feat=flexbox, вы увидите, что в современных браузерах он работает нормально.

Надеюсь, это полезно, хотя это не является прямым решением вашей проблемы!