CSS How can make li fit in ul depending on their height?-CodePudding

I'm in trouble with some li in a menu. I made a sandbox with what i have made, i'm struggling at making the div in blue fill the height correctly or with auto height. The menu on the left (red one) is okay. That should be like in this menu (https://www.superc.ca/ in "EPICERIE EN LIGNE") : https://i.stack.imgur.com/aKo36.png

My CSS :

#header .navbar-responsive-collapse-mainMenu {
  border-top: gray;
  padding: 0;
  border-top-width: 2px;
}
#header .navbar-responsive-collapse-mainMenu span.title {
  color: #242932;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 14px;
  text-align: center;
}
#header .navbar-responsive-collapse-mainMenu .nav-menu-header {
  margin-left: 160px;
}
#header .navbar-responsive-collapse-mainMenu ul li a {
  font-family: rubikmedium;
  color: #242932;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 17px;
}
#header
  div.navbar-responsive-collapse-mainMenu
  ul.nav-menu-header
  > :first-child.open
  > a {
  color: #e31937;
}
#header
  div.navbar-responsive-collapse-mainMenu
  ul.nav-menu-header
  > :first-child
  > a {
  padding-left: 0;
}
#header .open > .dropdown-menu {
  display: flex;
  flex-direction: column;
  left: -161px;
  height: 550px;
  background-color : black;
  width: 1440px;
}
#header .ul-level-1 .li-level-1 {
  height: 40px;
  width: 264px;
  background-color: #FF7276;
  margin-left: 160px;
}
#header .ul-level-1 .li-level-1 a {
  color: #242932;
  font-family: latoregular;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22px;
}
#header .ul-level-1 .li-level-1 .ul-level-2 {
  margin-left: 275px;
  width: 1005px;
  display: flex;
  flex-wrap: wrap;
}
#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
  width: 265px;
  margin-bottom: 8px;
  margin-left : 20px;
  background-color : #add8e6;
  display: inline-block;
  position: relative;
}

This is my html :

<header id="header">
  <nav  data-rbs-website-menu="" data-block-id="mainMenu" style="margin-bottom: 0;">
    <div >
      <ul >
        <li >
          <a data-toggle="dropdown"  target="_self" aria-expanded="true">
            Les produits <b ></b>
          </a>
          <ul >
            <li >
              <a target="_self">offre du moment</a>
              <ul >
                <li >
                  <a target="_self">First Category</a>
                  <ul >
                    <li >
                      <a target="_self">first sub-element</a>
                    </li>

                    <li >
                      <a target="_self">second sub-element</a>
                    </li>

                  </ul>
                </li>

                <li >
                  <a target="_self">Second Category</a>
                  <ul >
                    <li >
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li >
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>

                <li >
                  <a target="_self">Third Category</a>
                  <ul >
                    <li >
                      <a target="_self">Ciseaux, équerres, compas</a>
                    </li>

                  </ul>
                </li>

                <li >
                  <a target="_self">Fourth Category
                </li>

                <li >
                  <a target="_self">Fifth Category</a>
                                    <ul >
                    <li >
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li >
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>
                <li >
                  <a target="_self">Fifth Category</a>
                                    <ul >
                    <li >
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li >
                      <a target="_self">stylos à plumes</a>
                    </li>
                    <li >
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>
                <li >
                  <a target="_self">Fifth Category</a>
                                    <ul >
                    <li >
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>
                    <li >
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                    <li >
                      <a target="_self">stylos à plumes</a>
                    </li>
                                                          <li >
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li >
                      <a target="_self">stylos billes</a>
                    </li>

                    <li >
                      <a target="_self">stylos billes</a>
                    </li>
                  </ul>
                </li>

              </ul>
            </li>

            <li >
              <a target="_self">Les produits les plus vendus</a>
            </li>

            <li >
              <a target="_self">Cartouches d’encre</a>
            </li>

            <li >
              <a target="_self">Imprimantes</a>
            </li>

            <li >
              <a href="papiers/" target="_self">Papiers</a>
            </li>

            <li >
              <a target="_self">Fauteuils &amp; chaises</a>
            </li>

            <li >
              <a target="_self">Services généraux</a>
            </li>

          </ul>
        </li>
      </ul>
    </div>
  </nav>
  </div>
  </div>
  </div>
</header>

This is my sandbox if you have any idea : https://codepen.io/Kh4yz/pen/XWEqOqN

CodePudding user response：

You can always inspect a webpage and see how the CSS is implemented.

#header .ul-level-1 .li-level-1 .ul-level-2 {
  margin-left: 275px;
  width: 1005px;
  /*  Remove flex */
  column-count: 3;
}


#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
  width: 265px;
  margin-bottom: 8px;
  margin-left : 20px;
  background-color : #add8e6;
  display: inline-block;
  position: relative;
  float: left; /* This is missing */
}