div { background-color: blue; padding: 40px; color: white; cursor: pointer; transition: all .1s ease; } .hidden { visibility: hidden; opacity: 0; max-height: 0%; } .hidden:hover { visibility: visible; opacity: 1; max-height: 1000px; } <div class="hidden"></div>
div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; }