В момент пропадания drodown, визуально он пропадает, но в реальности он на странице остается еще около 1-2 секунд. Т.е. после скрытия drodown, можно навести курсор на место, где ранее был drodown и тем самым снова показать этот самый drodown.
Как сделать, чтобы drodown сразу пропадал, как только пропал визуально?
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown {
position: inline-block;
display: relative;
}
.dropdown__container {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: lightgray;
padding: 1em;
transition: all 0.5s;
}
.dropdown:hover>.dropdown__container {
visibility: visible;
opacity: 1;
}
<div class="container">
<div class="dropdown">
<a href="#">Dropdown test</a>
<div class="dropdown__container">
I am Dropdown
</div>
</div>
</div>