<header>
        <div class="container">
            <ul class="header-menu">
                <li class="header-item"><a href="{{ route('admin.index') }}">Главная</a></li>
                <li class="header-item dropdown-btn">Товары
                    <ul class="dropdown-menu">
                        <li class="dropdown-item"><a href="#">Товар1</a></li>
                        <li class="dropdown-item"><a href="#">Товар2</a></li>
                        <li class="dropdown-item"><a href="#">Товар3</a></li>
                        <li class="dropdown-item"><a href="#"> Товар4</a></li>
                    </ul>   
                </li>
                <li class="header-item"><a href="#">Заявки</a></li>
                <li class="header-item"><a href="{{ route('index') }}">На сайт</a></li>
            </ul>
        </div>
    </header>
body {
    margin: 0;
    padding: 0;
}
.container{
    max-width: 1200px;
    margin: 0 auto;
}
.header-menu {
    display: flex;
    margin: 0;
    padding: 0;
}

.header-menu .header-item {
    list-style-type: none;
    flex-basis: auto;
    flex-grow: 1;
    text-align: center;
}


.header-menu .header-item a {
    padding: 20px 0;
    text-decoration: none;
    color: #000;
    display: block;
    position: relative;
}
.dropdown-btn{
    padding: 20px 0;
}

.dropdown-btn:hover .dropdown-menu{
    display: block;
}
.dropdown-menu{
    float: left;
    display: none;
    position: absolute;
    list-style-type: none;
    width: 150px;
}
.dropdown-item a{
    float: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.