Редко это использую и каждый раз забываю как это делается.

<div class="test">
Hover me
<div class="sub">Sub-menu</div>
</div>
Code language: HTML, XML (xml)

.test {
  font-size: 60px;
  color: white;
  background: blue;
  display: inline-block;
}

.sub {
  width: 100%;
  background-color: #ff6699;
  visibility: hidden;
  opacity: 0;
  transition:visibility 1s, opacity 1s;
}

.test:hover .sub {
  visibility: visible;
  opacity: 1;
}

Code language: CSS (css)

Результат: