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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.