CSS: изменение высоты заголовка при зависании на другом элементе

Question

Я пытаюсь изменить высоту заголовка, пока я нахожусь над div в заголовке. Div - это выпадающая кнопка, и заголовок должен продлить определенное количество пикселей, чтобы соответствовать раскрывающемуся содержимому.

HTML:

<header> 
    <nav class="menyer"> 
     <div class="dropdown"> 
      <button class="dropbtn">Dropdown</button> 
       <div class="dropdown-content"> 
        <a href="#">Link 1</a> 
        <a href="#">Link 2</a> 
        <a href="#">Link 3</a> 
       </div> 
     </div> 
    </nav> 
</header> 

Вы можете найти исходный код here

Answer 1

Вы не можете изменить высоту элемента при наведении над дочерним-элемента. Все, что вы можете сделать, это увеличить высоту внутреннего элемента, чтобы внешний элемент растягивался соответствующим образом. Это работает только если нет фиксированной высоты на базовый элементе (ваш заголовок)

Основного пример:

<header> <ul> <li>Item 1</li> <li> Item 2 </li> </ul> </header> 

CSS:

li{display:block;height: 30px;} 
li:hover{height: 50px;} 
header{background-color:red} 

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