CSS多级下拉菜单布局优化：解决li元素高度自适应与多列排版问题

<header id="header">
  <nav class="navbar ...">
    <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-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>
                    <!-- 更多子元素，可能导致高度不同 -->
                  </ul>
                </li>
                <!-- 更多 li-level-2 元素，内容高度可能不同 -->
              </ul>
            </li>
            <!-- 更多 li-level-1 元素 -->
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>

#header .open > .dropdown-menu {
  /* ... 其他样式 ... */
  height: 550px; /* 固定高度，可能导致问题 */
  /* ... */
}
#header .ul-level-1 .li-level-1 .ul-level-2 {
  margin-left: 275px;
  width: 1005px;
  display: flex; /* 使用 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; /* 或许为了兼容性，但与flex冲突 */
  position: relative;
}

/* 移除父级 .dropdown-menu 的固定高度，让其自适应 */
#header .open > .dropdown-menu {
  /* height: 550px; /* 根据实际情况移除或设置为 auto */
  /* ... 其他样式 ... */
}

/* 针对 ul-level-2 容器 */
#header .ul-level-1 .li-level-1 .ul-level-2 {
  margin-left: 275px;
  width: 1005px;
  /* 移除 display: flex 和 flex-wrap，因为我们将使用 column-count */
  /* display: flex; */
  /* flex-wrap: wrap; */

  /* 引入 column-count 实现多列布局 */
  column-count: 3; /* 将内容分为3列 */
  /* 可以选择性添加列间距 */
  column-gap: 20px; 
}

/* 针对 li-level-2 子元素 */
#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 */
  /* display: inline-block; */
  position: relative;

  /* 添加 float: left 实现左浮动和高度自适应 */
  float: left; 
}