In an attempt to develop a category dropdown menu with multiple columns based on the length of the <ul>, I am facing some challenges.
For reference, you can view the fiddle that I have created here.
The goal is to arrange each submenu item below the previous one until it reaches the height limit, at which point a new column should be started. The desired layout is illustrated as follows:
Main category
|
subcategory1 subcategory3
|subsub1 for subcategory1 |subsub1 for subcategory3
|subsub2 for subcategory1 |
| subcategory4
subcategory2 | etc...
|subsub1 for subcategory2
|subsub2 for subcategory2
--------------------------------------------------------------------
// total height of the dropdown
is reached here
I have utilized flex-flow and it seems to be functioning well. However, my issue lies in getting the dropdown container to expand full-width with a background color.
The HTML structure that I have used is:
<div class="cats">
<ul>
<li class="item sub">
<a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
<div class="subnav">
<ul class="flex-wrap">
<li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
<li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
<li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
<li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
<li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
</ul>
</div>
</li>
</ul>
</div>
The CSS styling applied is as follows:
.cats .subnav {
background: #fff none repeat scroll 0 0;
border: 1px solid #eee;
padding: 30px;
position: absolute;
text-align: left;
z-index: 99;
display:none;
}
.cats .item.sub:hover .subnav {
display: block;
}
.flex-wrap {
background: #fff none repeat scroll 0 0;
display: flex;
flex-flow: column wrap;
height: 200px;
}
.subnav .subitem {
background: #fff none repeat scroll 0 0;
line-height: 36px;
}
My question pertains to how I can configure .subnav to dynamically adjust its background size according to the content.