0

Кучу времени вожусь и не получается в подменю выравнивать все элементы вертикально а не горизонтально:

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>

1
  • чтоб корректно показывался пример надо открыть на всю страницу 13 мая 2020 в 9:40

1 ответ 1

1

Flex имеет проблемы с разворачиванием ширины при использовании flex-direction: column. Поэтому имеет смысл использовать grid.

Добавьте в конец файла стиля, это должно решить вашу проблему:

.subcategories {
    max-height: unset;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
}

.subcategories span {
    display: block;
}
4
  • Это именно то что было нужно =) Благодарю!!!! 13 мая 2020 в 10:50
  • а есть возможность не указывать количество строк? 13 мая 2020 в 11:09
  • А по какому принципу вы планируете переносить ссылки в следующий столбец? 13 мая 2020 в 11:18
  • сколько влезет в столбец столько и влезет а остальное переносится на новый. 13 мая 2020 в 11:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.