Выровнять списки кнопок по последнему элементу

Question

Сразу вставлю картинку Реальность Vs Ожидание, ибо не удалось внятно объяснить словами

И собственно код, в котором css уже присутствует (div-блок на 129 строке, css на 82)

<!DOCTYPE html>



<head>
<style> 
.zagolovok {
    width:100vw;
    background:url('repeatable.png');
    height:auto;
    white-space: nowrap;
    position:relative;
    background-repeat:repeat-x;
    font-family:Palatino Linotype;
    font-size: calc(4vw + 4vh + 2vmin);
    text-shadow: 
        -1px -1px 0 #DDD,  
         1px -1px 0 #DDD,
        -1px  1px 0 #DDD,
         1px  1px 0 #DDD; 
    }
    

.toolbar {
    position: sticky;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    top:0;
    }


.plitka {
    background-color: #777700;
    flex: 1 1 25%; 
    font-size: calc(1vw + 2vh + 1vmin); 
    text-align: center;
    padding: 10px; 
    box-sizing: border-box;
    min-width: 100px; 
    border-right: 1px solid black;
    border-left: 1px solid black;
    cursor: pointer;
    position: relative; 
}

.hidden-items {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;  
    top: calc(100% - 2px);          
    left: 0;             
    z-index: 999;
}

.catalog {
    position: relative;  
}

.catalog:hover .hidden-items {
    display: flex;       
}


    
.hidden-items .plitka {
    width:100%;
    border-right: none; 
    border-left: none;  
    border-top: 1px solid black; 
    background-color: #a7a71d; /* Измененный цвет фона */
}.hidden-items .submenu .plitka {
    width:100%;
    border-right: none; 
    border-left: 1px solid black;  
    border-top: 1px solid black; 
    background-color: #d0d048; /* Измененный цвет фона */
}

.submenu {
    display: none;
    flex-direction: column;
    width:100%;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #d0d048; /* Измененный цвет фона */
    z-index: 999;
}

.hidden-items .plitka:hover .submenu {
    display: flex;
}

@media screen and (max-width: 768px) {
  .zagolovok {
    font-size: 16px; /* Размер шрифта для маленьких экранов */
    white-space: normal; /* Разрешение переноса текста */
    overflow: visible; /* Показ перенесенного текста */
  }
  
  .plitka {
    font-size: 14px; /* Размер шрифта для маленьких экранов */
  }
}
</style>


</head>

<body style="margin: 0px; font-family:'Century Gothic'">

<div class="zagolovok" align="center"><b>ИЗДЕЛИЯ ИЗ ДЕРЕВА</b></div>
<div class="toolbar">
    <div class="plitka">ГЛАВНАЯ</div>
    <div class="plitka catalog">
    КАТАЛОГ
        <div class="hidden-items">
            <div class="plitka">Двери</div>
            <div class="plitka">Рамы</div>
            <div class="plitka">Лестницы</div>
            <div class="plitka">Столы</div>
            <div class="plitka">Лавки</div>
            <div class="plitka">Стулья</div>
            <div class="plitka">Погонаж
            <div class="submenu">
                <div class="plitka">Блокхаус</div>
                <div class="plitka">Вагонка</div>
                <div class="plitka">Половая доска</div>
                <div class="plitka">Плинтус</div>
                <div class="plitka">Наличник</div>
            </div>
        </div>
        </div>
    </div>
    <div class="plitka">АДРЕС</div>
    <div class="plitka">КОНТАКТЫ</div>
</div>



<p><b>The standard Lorem Ipsum passage, used since the 1500s</p></b>
<p style="white-space:normal;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</body>
</html>

Answer 1

проще пареной репы.

у .submenu заменяем top: 0; на bottom: 0; и все дела.

.zagolovok {
  width: 100vw;
  background: url('repeatable.png');
  height: auto;
  white-space: nowrap;
  position: relative;
  background-repeat: repeat-x;
  font-family: Palatino Linotype;
  font-size: calc(4vw + 4vh + 2vmin);
  text-shadow: -1px -1px 0 #DDD, 1px -1px 0 #DDD, -1px 1px 0 #DDD, 1px 1px 0 #DDD;
}

.toolbar {
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  top: 0;
}

.plitka {
  background-color: #777700;
  flex: 1 1 25%;
  font-size: calc(1vw + 2vh + 1vmin);
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  min-width: 100px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  cursor: pointer;
  position: relative;
}

.hidden-items {
  display: none;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  z-index: 999;
}

.catalog {
  position: relative;
}

.catalog:hover .hidden-items {
  display: flex;
}

.hidden-items .plitka {
  width: 100%;
  border-right: none;
  border-left: none;
  border-top: 1px solid black;
  background-color: #a7a71d;
  /* Измененный цвет фона */
}

.hidden-items .submenu .plitka {
  width: 100%;
  border-right: none;
  border-left: 1px solid black;
  border-top: 1px solid black;
  background-color: #d0d048;
  /* Измененный цвет фона */
}

.submenu {
  display: none;
  flex-direction: column;
  width: 100%;
  position: absolute;
  /*top: 0;  !!!!!!!!!!!!!!*/
  bottom: 0; /*!!!!!!!!!!!!*/
  left: 100%;
  background-color: #d0d048;
  /* Измененный цвет фона */
  z-index: 999;
}

.hidden-items .plitka:hover .submenu {
  display: flex;
}

@media screen and (max-width: 768px) {
  .zagolovok {
    font-size: 16px;
    /* Размер шрифта для маленьких экранов */
    white-space: normal;
    /* Разрешение переноса текста */
    overflow: visible;
    /* Показ перенесенного текста */
  }
  .plitka {
    font-size: 14px;
    /* Размер шрифта для маленьких экранов */
  }
}

<!DOCTYPE html>
<body style="margin: 0px; font-family:'Century Gothic'">

  <div class="zagolovok" align="center"><b>ИЗДЕЛИЯ ИЗ ДЕРЕВА</b></div>
  <div class="toolbar">
    <div class="plitka">ГЛАВНАЯ</div>
    <div class="plitka catalog">
      КАТАЛОГ
      <div class="hidden-items">
        <div class="plitka">Двери</div>
        <div class="plitka">Рамы</div>
        <div class="plitka">Лестницы</div>
        <div class="plitka">Столы</div>
        <div class="plitka">Лавки</div>
        <div class="plitka">Стулья</div>
        <div class="plitka">Погонаж
          <div class="submenu">
            <div class="plitka">Блокхаус</div>
            <div class="plitka">Вагонка</div>
            <div class="plitka">Половая доска</div>
            <div class="plitka">Плинтус</div>
            <div class="plitka">Наличник</div>
          </div>
        </div>
      </div>
    </div>
    <div class="plitka">АДРЕС</div>
    <div class="plitka">КОНТАКТЫ</div>
  </div>
  <p><b>The standard Lorem Ipsum passage, used since the 1500s</p></b>
    <p style="white-space:normal;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</body>

</html>

БЛОГ НА HUSL

Выровнять списки кнопок по последнему элементу

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