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

Question

我在菜单中遇到了一些 li 的问题。 我用我所做的做了一个沙箱，我正在努力让蓝色的 div 正确填充高度或使用自动高度。 左边的菜单（红色的）还可以。 这应该像在这个菜单中一样（ https://www.superc.ca/ in "EPICERIE EN LIGNE"）： https://i.stack.imgur.com/aKo36.png

我的 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;
}

这是我的 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>

如果您有任何想法，这是我的沙箱： https://codepen.io/Kh4yz/pen/XWEqOqN

Answer 1

您始终可以检查网页并查看 CSS 是如何实现的。

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