<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Главная</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Услуги</a>
<ul class="submenu-list">
<li class="submenu-item">
<a href="#" class="submenu-link">Покраска</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">Ремонт</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">Гравировка</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" class="menu-link">О компании</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Контакты</a>
</li>
</ul>
</nav>
body{
margin: 0;
}
.menu{
width: 100vw;
height: 60px;
padding: 10px 15px;
background-color: #d3d3d3;
display: flex;
align-items: center;
}
.menu-list{
margin-left: 6vw;
padding: 0;
}
.menu-item,
.submenu-item{
display: inline-block;
position: relative;
margin: 0 2vw;
}
.menu-link,
.submenu-link{
color: #000;
text-decoration: none;
font-size: 18px;
font-weight: 700;
font-family: monospace;
}
.submenu-list{
position: absolute;
opacity: 0;
background-color: #e7e7e7;
border-radius: 6px;
padding: 10px 0;
transition: opacity .3s ease;
}
.menu-item:hover .submenu-list{
opacity: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.