2

I'm trying to create a category dropdown menu with a few columns depending on the length of the <ul>.

I've created a fiddle here

I want to place each submenu item underneath the previous one until the height of the submenu is reached. If so then everything should be placed in a new column.

Something like this:

Main category
 |
 subcategory1                         subcategory3
  |subsub1 for subcategroy1            |subsub1 for subcategroy3 
  |subsub2 for subcategroy1           |
 |                                    subcategory4
 subcategory2                          | etc...
  |subsub1 for subcategroy2 
  |subsub2 for subcategroy2 
 --------------------------------------------------------------------  
 // total height of the dropdown 
    is reached here

I'm using flex-flow and for that which actually works good. However I can't get my dropdown container to be full-width width a background color.

My HTML looks like this: 

    <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>

As CSS is use this:

.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;
}

SO how can I make .subnav to fill the background for as much needed?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Meules
  • 1,349
  • 4
  • 24
  • 71
  • 1
    it was asked a lot of times before: http://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width Short answer, You can't without JS :) – Bogdan Kuštan Jul 05 '16 at 11:57

1 Answers1

0

Please refer the below css code:

Add left and right to .cats .subnav

.cats .subnav {
    right: 0;
    left: 0; 
}
vignesh
  • 951
  • 5
  • 13
  • That makes the `.subnav` as wide as the `main-category` which is positioned `relative`. I tried this but doesn't work – Meules Jul 05 '16 at 11:49