БЛОГ НА HUSL


Расстояние между пунктами меню

Автор вопроса: goodsoft

Есть страница

введите сюда описание изображения

и на ней есть подменю Крупная бытовая техника -> Холодильники, Морозильные камеры, Морозильные лари. Есть также код этой страницы

<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%;
  min-width: 100%;
  width: 559px;
  background-color: #fff;
  border: 1px solid thistle;
  visibility: hidden;
  column-count: 2;
  white-space: nowrap;
}

ul.level2>li {
  padding: 0.5em 0.3em 0.5em 0.3em;
  border-bottom: 1px solid #fff;
}

ul.level2>li>ul>li {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul.level1>li:hover ul.level2 {
  visibility: visible;
}

.menu a {
  color: #333;
}

.alignblock {
    text-align: center;
    vertical-align: middle;
}

  </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><ul><li><a href="#">Крупная бытовая техника</a></li><li><a href="#">Холодильники</a></li><li><a href="#">Морозильные камеры</a></li><li><a href="#">Морозильные лари</a></li><li><a href="#"></a></li></ul></li>
        <li>Sub-Item 1-2</li>
        <li>Sub-Item 1-3</li>
        <li>Sub-Item 1-4</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>

</body>
</html>

Есть также страница https://positronica.ru/

введите сюда описание изображения

Требуется, чтобы вышеуказанное подменю выглядело с такими же расстояниями между пунктами, как на последнем рисунке, а также не было расстояния до пункта меню - Крупная бытовая техника. Как этого добиться (пытался вставить -

ul.level2>li>ul>li {
  margin-top: 0px;
  margin-bottom: 0px;
}

не получилось)?


Источник

Ответы (1 шт):

Автор решения: Sevastopol'

Как вариант, можно заключить каждый раздел в отдельные теги span и указать нужные стили. Пример:

.menu {
  position: relative;
  width: 10em;
}

.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: bisque;
  border-bottom: 1px solid thistle;
}

ul.level1>li:last-child {
  border-bottom: none;
}

ul.level2 {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 100%;
  background-color: beige;
  border: 1px solid thistle;
  visibility: hidden;
  column-count: 2;
  white-space: nowrap;
}

ul.level2>li,
ul.level2>span>li {
  padding: 0.2em 0.3em 0.2em 0.3em;
}

ul.level1>li:hover ul.level2 {
  visibility: visible;
}

.menu a {
  color: #333;
}

.bold {
  font-weight: bold;
}

ul.level2>span {
  display: inline-block;
  float: left;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 20px;
}
<nav class="menu">
  <ul class="level1">
    <li id="l1">
      <div>Главный раздел 1 +</div>
      <ul class="level2">
        <li>Наименование 1-1</li>
        <li>Наименование 1-2</li>
        <li>Наименование 1-3</li>
        <li>Наименование 1-4</li>
      </ul>
    </li>
    <li id="l2">
      <div>Главный раздел 2</div>
    </li>
    <li id="l3">
      <div>Главный раздел 3 +</div>
      <ul class="level2">
        <span>
        <li class="bold">Подраздел 1</li>
        <li>Наименование 1-1</li>
        <li>Наименование 1-2</li>
        <li>Наименование 1-3</li>
        </span><span>
        <li class="bold">Подраздел 2</li>
        <li>Наименование 2-1</li>
        <li>Наименование 2-2</li>
        <li>Наименование 2-3</li>
        </span><span>
        <li class="bold">Подраздел 3</li>
        <li>Наименование 3-1</li>
        <li>Наименование 3-2</li>
        <li>Наименование 3-3</li>
        <li>Наименование 3-4</li>
        <li>Наименование 3-5</li>
        </span><span>
        <li class="bold">Подраздел 4</li>
        <li>Наименование 4-1</li>
        <li>Наименование 4-2</li>
        <li>Наименование 4-3</li>
        <li>Наименование 4-4</li>
        <li>Наименование 4-5</li>
        </span><span>
        <li class="bold">Подраздел 5</li>
        <li>Наименование 5-1</li>
        <li>Наименование 5-2</li>
        <li>Наименование 5-3</li>
        </span>
      </ul>
    </li>
    <li id="l2">
      <div>Главный раздел 4</div>
    </li>
    <li id="l2">
      <div>Главный раздел 5</div>
    </li>
    <li id="l2">
      <div>Главный раздел 6</div>
    </li>
  </ul>
</nav>

upd. Дополнительно еще смотрите стили для ul.level2>span - я их добавил для того, чтобы блоки с подразделами не разбивались при переносе на следующую строку.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.