CSS 如何根据身高使 li 适合 ul？

Question

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 class="navbar ng-isolate-scope" data-rbs-website-menu="" data-block-id="mainMenu" style="margin-bottom: 0;">
    <div class="collapse navbar-collapse navbar-responsive-collapse-mainMenu">
      <ul class="nav navbar-nav nav-menu nav-menu-header">
        <li class="dropdown open">
          <a data-toggle="dropdown" class="dropdown-toggle" target="_self" aria-expanded="true">
            Les produits <b class="caret"></b>
          </a>
          <ul class="dropdown-menu ul-level-1">
            <li class=" li-level-1">
              <a target="_self">offre du moment</a>
              <ul class="dropdown-sub-menu list-unstyled ul-level-2">
                <li class=" li-level-2">
                  <a target="_self">First Category</a>
                  <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">first sub-element</a>
                    </li>

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

                  </ul>
                </li>

                <li class=" li-level-2">
                  <a target="_self">Second Category</a>
                  <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>

                <li class=" li-level-2">
                  <a target="_self">Third Category</a>
                  <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Ciseaux, équerres, compas</a>
                    </li>

                  </ul>
                </li>

                <li class=" li-level-2">
                  <a target="_self">Fourth Category
                </li>

                <li class=" li-level-2">
                  <a target="_self">Fifth Category</a>
                                    <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>
                <li class=" li-level-2">
                  <a target="_self">Fifth Category</a>
                                    <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>
                <li class=" li-level-2">
                  <a target="_self">Fifth Category</a>
                                    <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>
                                                          <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                  </ul>
                </li>

              </ul>
            </li>

            <li class=" li-level-1">
              <a target="_self">Les produits les plus vendus</a>
            </li>

            <li class=" li-level-1">
              <a target="_self">Cartouches d’encre</a>
            </li>

            <li class=" li-level-1">
              <a target="_self">Imprimantes</a>
            </li>

            <li class=" li-level-1">
              <a href="papiers/" target="_self">Papiers</a>
            </li>

            <li class=" li-level-1">
              <a target="_self">Fauteuils &amp; chaises</a>
            </li>

            <li class=" li-level-1">
              <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

Answer 1

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 */
}