Кучу времени вожусь и не получается в подменю выравнивать все элементы вертикально а не горизонтально:
1 4
2 5
3 6
использовал конструкцию ul li и flex но родительский див в не какую не хочет растягиваться под размер контента. Цель добиться 2-3-4 столбцов в подменю примерно таким образом :
.desctop-menu {
width: 280px;
background: #ffffff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
-moz-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
}
.categories-list {
margin: 0;
padding: 20px 0;
list-style-type: none;
}
.categories-item {
display: flex;
padding: 0 20px;
}
.categories-item:hover {
background-color: #f2f2f2;
}
.categories-item img {
margin: 20px 20px 20px 0;
}
.categories-item:after {
content: "";
display: block;
width: 10px;
height: 60px;
margin-right: -30px;
}
.categories-info {
margin: auto 0;
width: 100%;
}
.categories-info a {
display: block;
text-decoration: none;
color: black;
}
.categories-info span {
color: #b9b9b9;
font-size: 0.8rem;
}
.subcategories-item {
display: block;
/** display: none **/
position: absolute;
margin: -10px 0 0 270px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
-moz-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
position: absolute;
padding: 32px;
z-index: 1000;
}
.subcategories-item li {
page-break-inside: avoid;
break-inside: avoid;
}
.subcategories {
max-height: 236px;
}
<div class="desctop-menu">
<ul class="categories-list">
<li class="categories-item">
<img src="https://c.dns-shop.ru/thumb/st1/fit_width/25/25/e805e9a66d0c74fcb2712ef9d47ce7b8/q100_a9172f7a3408f5119fb3803bf302f76a5ad3ac5da4f03600cb3b2af42df98a78.png" />
<div class="categories-info">
<a href="#">Бытовая техника</a>
<span>для дома и офиса</span>
</div>
<ul class="subcategories-item">
<div class="subcategories">
<span><a>Утюг</a></span>
<span><a>Утюг</a></span>
<span><a>Утюг</a></span>
<span><a>Утюг</a></span>
<span><a>Утюг</a></span>
<span><a>Утюг</a></span>
<span><a>Утюг</a></span>
<span><a>Утюг</a></span>
</div>
</ul>
</li>
</ul>
</div>