I can not understand how to indent the elements li from their upper points, and not from the whole row.

menu

 .megamenu__columns.megamenu__columns-image-off { padding-right: 0 !important; } .megamenu ul { padding: 0; margin: 0; list-style: none; position: relative; } .megamenu__columns { padding-top: 25px !important; padding-bottom: 20px !important; } .megamenu__columns .level-menu { width: 24%; display: inline-block; vertical-align: top; margin-bottom: 15px; z-index: 100; } .megamenu__columns .level-menu li { list-style: none; } .megamenu__columns .level-menu li.title { font-size: 1em; font-weight: bold; margin-bottom: 10px; text-transform: uppercase; } 
 <ul class="megamenu__columns megamenu__columns-image-off"> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> <li class="level-menu level1"> <ul> <li class="title"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> <li class="level2"><a href="#">Пункт меню</a></li> </ul> </li> </ul>

  • It's not entirely clear what you want to get as a result. - Daniyal Lukmanov
  • I understand what exactly does not work, because you can also set a margin-top or margin-bottom for the corresponding elements. - Vadim Ovchinnikov
  • Negative margin-top tried, it becomes as needed. But here the problem is that this menu on the site will often change, and every time you do not want to climb css. - Eugene

1 answer 1

If it is permissible to arrange the menu items in order not from left to right, but from top to bottom with the transfer, you can make a multi-column layout:

 .megamenu__columns { column-count:4; } .megamenu__columns .level-menu { width: auto; display: block; } .megamenu__columns .level-menu ul { -webkit-column-break-inside: avoid; column-break-inside: avoid; page-break-inside: avoid; white-space: nowrap; } .megamenu__columns .level-menu li a {white-space: normal;}