title: how to create a list menu in to layers with 100% width?
body: <p>I have a menu in a list form, I want the menu to be in two rows one row with the first the first level  and the second row with the second level . The problem I've been fighting with is that I want each row to be 100%.</p>
  
  <p>this is what I want to result to look like, exepet one thing -
  <img src="https://i.stack.imgur.com/Mckjz.png" alt="enter image description here"></p>
  
  <p>I don't want the second row of the menu to cover the image.</p>
  
  <p>please hep me!</p>
  
  <pre><code>&lt;ul class="levelOne"&gt;
     &lt;li&gt;1&lt;/li&gt;
     &lt;li&gt;2&lt;/li&gt;
     &lt;li&gt;3&lt;/li&gt;
     &lt;li&gt;4
         &lt;ul class="LevelTwo"&gt;
             &lt;li&gt;4.1&lt;/li&gt;
             &lt;li&gt;4.2&lt;/li&gt;
             &lt;li&gt;4.3&lt;/li&gt;
         &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>