html - ul widht auto stretch with maximum height -
i have html structure this:
<ul class="groupmenu-drop"> <li class="level1"> <a href="#"> bmw </a> <ul class="level1 groupmenu-drop"> <li class="level2"> i3 </li> <li class="level2"> i5 </li> <li class="level2"> i7 </li> </ul> </li> <li class="level1"> <a href="#"> mercedez benz </a> <ul class="level1 groupmenu-drop"> <li class="level2"> a-class </li> <li class="level2"> e-class </li> <li class="level2"> c-class </li> <li class="level2"> s-class </li> </ul> </li> </ul>
my current css:
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 > li { width: 100%; }
i want make first ul have maximum height when level1 li , child overlapping ul height make ul stretch width , level1 li fill it, here's want like:
try this, using flex-flow: column wrap;
display li
columns, , wrap if necessary or there space available vertically.
.groupmenu-drop:not(.level1) { max-height: 200px; display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; }
<ul class="groupmenu-drop"> <li class="level1"> <a href="#"> bmw </a> <ul class="level1 groupmenu-drop"> <li class="level2"> i3 </li> <li class="level2"> i5 </li> <li class="level2"> i7 </li> </ul> </li> <li class="level1"> <a href="#"> mercedez benz </a> <ul class="level1 groupmenu-drop"> <li class="level2"> a-class </li> <li class="level2"> e-class </li> <li class="level2"> c-class </li> <li class="level2"> s-class </li> </ul> </li> <li class="level1"> <a href="#"> audi </a> <ul class="level1 groupmenu-drop"> <li class="level2"> a-class </li> <li class="level2"> e-class </li> <li class="level2"> c-class </li> <li class="level2"> s-class </li> </ul> </li> </ul>
Comments
Post a Comment