Есть код
<html>
<head>
<!-- Кодировка веб-страницы -->
<meta charset="utf-8">
<!-- Настройка viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Подключаем Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style type="text/css">
.menu {
position: relative;
width: 370px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 0.5em 0 0.5em 0.3em;
cursor: pointer;
}
ul.level1 {
border: 1px solid thistle;
}
ul.level1>li {
background-color: #fff;
border-bottom: 1px solid thistle;
}
ul.level1>li:last-child {
border-bottom: none;
}
ul.level2 {
position: absolute;
top: 0;
left: 100%;
max-width: 559px;
max-height: 1010px;
background-color: #fff;
border: 1px solid thistle;
visibility: hidden;
white-space: nowrap;
}
ul.level2>li {
padding: 0.5em 0.3em 0.5em 0.3em;
border-bottom: 1px solid #fff;
}
ul.level2>li.submenu {
/* display: flex;
flex-direction: row;
justify-content: space-between; */
padding: 25px;
}
ul.level2>li>ul:not(:first-child) {
margin-top: 15px;
}
ul.level2>li>ul>li {
padding: 0;
}
ul.level1>li:hover ul.level2 {
visibility: visible;
}
.menu a {
color: #333;
}
.alignblock {
text-align: center;
vertical-align: middle;
}
.submenu__title {
margin-bottom: 5px;
}
.submenu__title a {
display: block;
color: black;
font: 13px Roboto, Tachoma, Arial, sans-serif;
/* line-height: 1.5; */
text-decoration: none;
padding: 3px 5px;
}
.submenu__item {
/* margin-bottom: 0px; */
}
.submenu__item a {
display: block;
color: gray;
font: 13px Roboto, Tachoma, Arial, sans-serif;
text-decoration: none;
padding: 3px 5px;
}
</style>
</head>
<body>
<div class="mainwrap">
<div class="mainmenu">
<span>
<span>
<button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</span>
<span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
</span>
<nav class="menu">
<ul class="level1">
<li id="l1">
<div class="alignblock">Бытовая техника для кухни</div>
<ul class="level2">
<li class="submenu">
<ul>
<li class="submenu__title">
<a href="#">Крупная бытовая техника</a>
</li>
<li class="submenu__item">
<a href="#">Холодильники</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные камеры</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные лари</a>
</li>
<li class="submenu__item">
<a href="#">Плиты газовые </a>
</li>
</ul>
<ul>
<li class="submenu__title">
<a href="#">New title</a>
</li>
<li class="submenu__item">
<a href="#">Холодильники</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные камеры</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные лари</a>
</li>
<li class="submenu__item">
<a href="#">Плиты газовые </a>
</li>
</ul>
</li>
</ul>
</li>
<li id="l2">
<div class="alignblock">Item 2</div>
</li>
<li id="l3">
<div class="alignblock">Item 3 +</div>
<ul class="level2">
<li>Sub-Item 3-1</li>
<li>Sub-Item 3-2</li>
<li>Sub-Item 3-3</li>
<li>Sub-Item 3-4</li>
<li>Sub-Item 3-5</li>
<li>Sub-Item 3-6</li>
<li>Sub-Item 3-7</li>
<li>Sub-Item 4-8</li>
</ul>
</li>
<li id="l2">
<div class="alignblock">Item 4</div>
</li>
<li id="l2">
<div class="alignblock">Item 5</div>
</li>
<li id="l2">
<div class="alignblock">Item 6</div>
</li>
</ul>
</nav>
</div>
<script src="jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- Подключаем Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</div>
</body>
</html>
Как добиться двухколоночности выпадающего меню (как на https://positronica.ru/)?