我有一个使用Flexbox创建的菜单。如您所见：
当我将鼠标悬停在（（示例页面ok））上时，菜单将打开。每个ul元素都是一个弹性项目，这是可以的，但是问题是，如果ul元素的高度很高，那么弹性项目应该移到下一列。我需要它从上一个ul元素开始，并且它的li元素在需要时移至下一列。实际上，我需要ul元素4在ul元素3之后而不是在下一列中开始。
我无法更改HTML，因为这是WP nav元素。
.niki-menu {
background-color: #616161;
box-shadow: 0 2px 4px 0 hsla(0,0%,44%,.05);
left: 0;
right: 0;
z-index: 99;
transition: top .3s;
position:relative;
direction:rtl;
text-align:right;
}
.niki-menu-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 2px;
z-index: 2;
background-color: #000;
}
.niki-menu-list {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 0;
margin-left: 0;
list-style: none;
background-color: #616161;
position: relative;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
}
.niki-menu-list-promotions {
position: relative;
}
.niki-menu-list-items > .niki-menu-list-items-item, .niki-menu-list-items > .c-navi-new-list__promotion-item, .niki-menu-list-promotions > .niki-menu-list-items-item, .niki-menu-list-promotions > .c-navi-new-list__promotion-item {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 0;
margin-left: 0;
list-style: none;
}
.niki-menu-list-items-item {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
.niki-menu-list-items-item>li>a {
display: block;
position: relative;
height: 100%;
padding: 8px 9px 7px;
color: #fff;
white-space: nowrap;
font-size: 11px;
line-height: 25px;
max-width: 116px;
overflow: hidden;
text-overflow: ellipsis;
transition: all .3s ease-in-out;
}
.niki-menu-list-items-item>li>a {
max-width: 140px;
}
.niki-menu-list-items-item>li>a {
max-width: unset;
font-size: 12px;
line-height: 1.833;
padding: 10px 20px 9px;
}
.niki-menu-list-items-item>li:hover>a {
box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
color:#fff;
}
.niki-menu-list-items-item>li:hover>a:before {
content: "";
position: absolute;
width: 100%;
bottom: 0;
z-index: 4;
left: 0;
right: 0;
height: 2px;
background-color: #ef5661;
transform: scaleX(1);
}
.niki-menu-list-items-item li>ul {
position: absolute;
top: 100%;
display: none;
right: 0;
left: unset;
z-index: 12;
width: 100%;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
height: 410px;
background-color: #fff;
padding: 19px 24px 45px 280px;
border-radius: 0 0 5px 5px;
overflow: hidden;
max-width: 1280px;
flex-wrap: wrap;
flex-direction: column;
}
.niki-menu-list-items-item li:hover>ul {
background: #fff;
display: inline-flex !important;
}
.niki-menu-list-items-item li>ul>li {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
max-width: 100%;
overflow: visible;
text-overflow: ellipsis;
line-height: 31.538px !important;
vertical-align: middle;
}
.niki-menu-list-items-item li>ul>li.break:after {
content: '';
height: 400px;
}
.niki-menu-list-items-item li>ul>li a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1ca2bd;
font-size: 12px;
line-height: 32px;;
font-weight: 500;
text-decoration: none;
display: block;
}
.niki-menu-list-items-item li>ul>li a:before {
content: "\E00F";
position: relative;
right: 0;
top:3px;
margin-left: 2px;
color: #1ca2bd;
font-size: 12px;
line-height: 1.833;
}
.niki-menu-list-items-item li>ul>li a:hover span {
border-bottom: 1px dashed #1ca2bd;
font-weight: 700
}
.niki-menu-list-items-item li>ul>li>ul {
position: relative;
top: auto;
display: inline-flex;
right: auto;
left: auto;
z-index: 12;
width: 100%;
box-shadow: none;
height: auto;
background-color: transparent;
padding: 0;
border-radius: 0;
overflow: visible;
max-width: 100%;
max-height: 350px;
flex-wrap: wrap;
}
.niki-menu-list-items-item li>ul>li:hover ul {
display: flex;
background-color: transparent;
}
.niki-menu-list-items-item li>ul>li>ul>li {
width:100%;
}
.niki-menu-list-items-item li>ul>li>ul>li a {
color: #6a6a6a;
font-size: 12px;
line-height: 2.27;
font-weight: 100;
padding-right: 20px;
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.niki-menu-list-items-item li>ul>li>ul>li a:before {
display:none;
}
.niki-menu-list-items-item li>ul>li>ul>li a:hover {
font-weight: 700;
border-bottom: none;
}<nav class="niki-menu">
<div class="container-fluid">
<div class="row no-gutters">
<ul class="niki-menu-list">
<li class="niki-menu-list-items">
<ul id="menu-main" class="niki-menu-list-items-item">
<li class=" menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current-menu-ancestor menu-item-has-children">
<a href=" ">sample page ok</a>
<ul class="sub-menu" style="height:410px">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href=" my-account/"><span class="menu-image-title">ul element</span></a>
<ul class="sub-menu">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" blog/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" checkout/">sample page</a></li>
</ul>
</li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" blog/"><span class="menu-image-title">ul element</span></a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href=" %"><span class="menu-image-title">ul element 3</span></a>
<ul class="sub-menu">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" order-tracking/">sample page</a></li>
</ul>
</li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children">
<a href=" my-account/"><span class="menu-image-title">ul element 4</span></a>
<ul class="sub-menu">
<li class="nikititle menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-20 current_page_item"><a href=" ">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" blog/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" my-account/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" checkout/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" blog/">sample page</a></li>
<li class="nikititle menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-20 current_page_item"><a href=" ">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" checkout/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" sample-page/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" cart/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-20 current_page_item"><a href=" ">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" shop/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" compare-page/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" compare/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" track-submit/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" order-tracking/">sample page</a></li>
</ul>
</li>
</ul>
</li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" sample-page/">sample page</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href=" shop/">sample page</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>