<nav>
<ul class="menu">
<li><a href="">Контакты</a>
<ul class="pod-menu">
<li><a href="">Контакты</a></li>
<li><a href="">Вопросы</a></li>
<li><a href="">Клиенты</a></li>
<li><a href="">О нас</a></li>
</ul>
</li>
<li><a href="">Вопросы</a>
<ul class="pod-menu">
<li><a href="">Контакты</a></li>
<li><a href="">Вопросы</a></li>
<li><a href="">Клиенты</a></li>
<li><a href="">О нас</a></li>
</ul>
</li>
<li><a href="">О нас</a></li>
</ul>
</nav>
* {
padding: 0;
margin: 0;
box-sizing:border-box;
text-decoration: none;
list-style:none;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.menu {
margin-top: 20px;
display: flex;
}
.menu li {
margin: 0px 10px;
}
.menu a {
color:black;
}
.pod-menu {
position:absolute;
padding: 10px;
background: #eee;
opacity:0;
transition:500ms;
transform:translateY(40px);
visibility: hidden;
}
.menu a:hover ~ .pod-menu {
opacity:1;
transform:unset;
visibility:unset;
}
.pod-menu:hover {
transform:unset;
visibility:unset;
opacity: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.