CSS visibility + opacity

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

<div class="test">
Hover me
<div class="sub">Sub-menu</div>
</div>

.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;
}

Результат:

<style> .jahsgfjgafhj-test { font-size: 60px; line-height: normal; color: white; background: blue; display: inline-block; } .jkahgja-sub { width: 100%; background-color: #ff6699; visibility: hidden; opacity: 0; transition:visibility 1s, opacity 1s; } .jahsgfjgafhj-test:hover .jkahgja-sub { visibility: visible; opacity: 1; } </style>