title: ul widht auto stretch with maximum height
body: <p>I have an html  structure roughly like this:</p>
  
  <pre><code>&lt;ul class="groupmenu-drop"&gt;
    &lt;li class="level1"&gt; 
       &lt;a href="#"&gt; BMW &lt;/a&gt;
       &lt;ul class="level1 groupmenu-drop"&gt;
          &lt;li class="level2"&gt; i3 &lt;/li&gt;
          &lt;li class="level2"&gt; i5 &lt;/li&gt;
          &lt;li class="level2"&gt; i7 &lt;/li&gt;   
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="level1"&gt; 
       &lt;a href="#"&gt; Mercedez Benz &lt;/a&gt;
       &lt;ul class="level1 groupmenu-drop"&gt;
          &lt;li class="level2"&gt; a-class &lt;/li&gt;
          &lt;li class="level2"&gt; e-class &lt;/li&gt;
          &lt;li class="level2"&gt; c-class &lt;/li&gt;
          &lt;li class="level2"&gt; s-class &lt;/li&gt;     
      &lt;/ul&gt;
    &lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>
  
  <p>my current css:</p>
  
  <pre><code>ul.groupmenu-drop{
      display: block;
      text-align: left;
      padding: 0;
      margin: 0;
      position: absolute;
      background: #fff;
      top: 100%;
      z-index: 99; 
      list-style: none none;
      box-sizing: border-box;
  }
  
  li{
      list-style: none
      padding: 8px 15px;
      min-width: 230px;
      position: relative;
      margin: 0px auto;
      box-sizing: border-box;
  }
  
  .groupmenu-drop &gt; li {
      width: 100%;
  }
  </code></pre>
  
  <p>I want to make the first ul to have maximum height so when the level1 li and its child overlapping the ul height it will make the ul stretch its width and the level1 li will fill it, here's what i want it to look  like:</p>
  
  <p><a href="https://i.stack.imgur.com/UAUKn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UAUKn.png" alt="sketch"></a></p>