Vertical Menu (+ Sub-Menu) stacks unnaturally
<p>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.</p>

<p><a href="https://i.stack.imgur.com/qH83B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qH83B.png" alt="example image"></a></p>

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

<p>Every element has</p>

<pre><code>display: block;
position: relative;
float: left;
width: 100%;
</code></pre>

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

<p><a href="http://codepen.io/anon/pen/JEPYYW" rel="nofollow noreferrer">http://codepen.io/anon/pen/JEPYYW</a></p>