CSS如何根据他们的身高使li适合ul

Question

菜单中的某些li出现问题。我用我所做的东西做了一个沙盒，我正在努力让蓝色的div正确填充高度或使用自动高度。左边的菜单(红色的(还可以。这个菜单应该是这样的(https://www.superc.ca/在"；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 */
}