我一直在将CSS用于大型菜单的多列视图样式。现在，菜单在多列中显示子菜单项，但是我面临的问题是尽管前一栏中有足够的空间，但这些子菜单项已在新列中启动。
即例如，我有31个子菜单选项，每列可以列出12个子菜单项。因此，它应该在第1列中显示12个菜单项，在第2列中显示12个菜单项，而在第3列中显示其余菜单项。在第2列中仅显示10个子菜单项，在第3列中显示其余菜单项。
您可以使用以下链接通过图像预览来查看它们： http://prntscr.com/oe22lu
我们致力于实现一些CSS脚本，以根据需要使子菜单项可见。
<div class="main-megamenu notmobile">
<ul class="navbar-nav">
<li class="nav-item dropdown" data-id="23">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-products" role="button">
<span class="category-name">EASY SERVO PRODUCTS</span>
</a>
<div class="catlevel-1">
<div class="dropdown-menu">
<div class="nav-items menu-options">
<div class="nav-item dropdown" data-id="24">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-motors" role="button">
<span class="category-name">Easy Servo Motors</span>
</a>
</div>
<div class="nav-item dropdown" data-id="40">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/2-phase" role="button">
<span class="category-name">2 Phase</span>
</a>
</div>
<div class="nav-item" data-id="42">
<a class="nav-link" href="/hybrid-stepper-motor-2">
<span class="category-name">Hybrid Stepper Motor</span>
</a>
</div>
</div>
<div class="nav-items menu-options-details">
<div class="submenu-details-wrapper" id="submenu-details-wrapper-24" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-24">
<div class="nav-item dropdown catlevel-2" data-id="25">
<a class="nav-link dropdown-toggle" href="/low-vdc-input">
<span class="category-name">Low VDC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-25">
<div class="nav-item" data-id="51">
<a class="nav-link" href="/2-phase-nema-14">
<span class="category-name">2 Phase NEMA 14</span>
</a>
</div>
<div class="nav-item" data-id="52">
<a class="nav-link" href="/2-phase-nema-16">
<span class="category-name">2 Phase NEMA 16</span>
</a>
</div>
<div class="nav-item" data-id="53">
<a class="nav-link" href="/vdc-or-transformer-input">
<span class="category-name">VDC or Transformer Input</span>
</a>
</div>
<div class="nav-item" data-id="54">
<a class="nav-link" href="/220230-vac-input">
<span class="category-name">220/230 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="61">
<a class="nav-link" href="/budge-stepper-drives">
<span class="category-name">Budge Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="62">
<a class="nav-link" href="/motor-extension-cables">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="27">
<a class="nav-link dropdown-toggle" href="/120-230-vac-input">
<span class="category-name">120 / 230 VAC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-27">
<div class="nav-item" data-id="57">
<a class="nav-link" href="/digital-stepper-drives">
<span class="category-name">Digital Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="58">
<a class="nav-link" href="/classic-stepper-drives">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="59">
<a class="nav-link" href="/stepper-drive-modules">
<span class="category-name">Stepper Drive Modules</span>
</a>
</div>
<div class="nav-item" data-id="60">
<a class="nav-link" href="/servo-motors-2">
<span class="category-name">Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="47">
<a class="nav-link dropdown-toggle" href="/2-phase-2">
<span class="category-name">Easy Servo Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-47">
<div class="nav-item" data-id="1056">
<a class="nav-link" href="/brushless-servo-products">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1057">
<a class="nav-link" href="/brush-servo-products">
<span class="category-name">Brush Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1058">
<a class="nav-link" href="/unregulated-switching">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1059">
<a class="nav-link" href="/motor-extension-cables-2">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1060">
<a class="nav-link" href="/advanced-digital-stepper-drives-2">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="48">
<a class="nav-link dropdown-toggle" href="/3-phase">
<span class="category-name">Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-48">
<div class="nav-item" data-id="1061">
<a class="nav-link" href="/110120-vac-input">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1062">
<a class="nav-link" href="/bldc-servo-motors">
<span class="category-name">BLDC Servo Motors</span>
</a>
</div>
<div class="nav-item" data-id="1074">
<a class="nav-link" href="/unregulated-switching-4">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="49">
<a class="nav-link dropdown-toggle" href="/5-phase">
<span class="category-name">High Torque Stepper Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-49">
<div class="nav-item" data-id="1063">
<a class="nav-link" href="/motor-extension-cables-3">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1064">
<a class="nav-link" href="/unregulated-switching-2">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="50">
<a class="nav-link dropdown-toggle" href="/09">
<span class="category-name">0.9</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-50">
<div class="nav-item" data-id="1065">
<a class="nav-link" href="/brush-servo-motors">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="55">
<a class="nav-link dropdown-toggle" href="/advanced-digital-stepper-drives">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-55">
<div class="nav-item" data-id="1066">
<a class="nav-link" href="/classic-stepper-drives-2">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="56">
<a class="nav-link dropdown-toggle" href="/integrated-easy-servo-motors">
<span class="category-name">Integrated Easy Servo Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-56">
<div class="nav-item" data-id="1067">
<a class="nav-link" href="/stepper-drives-with-oscillators">
<span class="category-name">Stepper Drives with Oscillators</span>
</a>
</div>
</div>
</div>
</div>
<div class="submenu-image" id="submenu-image-24">
<img src="../images/thumbs/000/0000233_easy-servo-motors_370.png">
</div>
</div>
<div class="submenu-details-wrapper" id="submenu-details-wrapper-40" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-40" style="min-height: 217px;">
<div class="nav-item dropdown catlevel-2" data-id="41">
<a class="nav-link dropdown-toggle" href="/geared-motors-2">
<span class="category-name">Geared Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-41">
<div class="nav-item" data-id="1072">
<a class="nav-link" href="/110120-vac-input-2">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1073">
<a class="nav-link" href="/motor-extension-cables-4">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1075">
<a class="nav-link" href="/brush-servo-motors-2">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item" data-id="1068">
<a class="nav-link" href="/brushless-servo-products-2">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1069">
<a class="nav-link" href="/brushless-servo-products-3">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1070">
<a class="nav-link" href="/unregulated-switching-3">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1071">
<a class="nav-link" href="/advanced-digital-stepper-drives-3">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" data-id="22">
<a class="nav-link" href="/others-2">
<span class="category-name">OTHERS</span>
</a>
</li>
<li class="mobile-menu-items"></li>
</ul>
我需要在多列中垂直显示子菜单项，以便仅当存在足够的菜单项时才使用附加列。您可以通过图像预览查看它们-http://prntscr.com/oe28im