<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.