Видел похожие вопросы и пробовал то, что предлагается там, но у меня не срабатывает никак.
Такое меню:
<nav class="menu">
<ul>
<li><a class="menu-item" href="#">Home</a>
<div class="dropdown-nav">
<div class="dropdown-nav-item">
<h1>Special offer!</h1>
<p>Some picture here</p>
</div>
</div>
</li>
<li><a class="menu-item" href="#">Men</a>
<div class="dropdown-nav">
<div class="dropdown-nav-item">
<a href="#"><b>Clothing</b></a>
<a href="#">Shirts</a>
<a href="#">Jackets</a>
<a href="#">Trousers</a>
<a href="#">Underwear</a>
<a href="#">Sports</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Shoes</b></a>
<a href="#">Boots</a>
<a href="#">Sneakers</a>
<a href="#">Sandals</a>
<a href="#">Loafers</a>
<a href="#">Brogues</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Accessories</b></a>
<a href="#">Glasses</a>
<a href="#">Gloves</a>
<a href="#">Hats</a>
<a href="#">Bags</a>
<a href="#">Belts</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Jewelry</b></a>
<a href="#">Bracelets</a>
<a href="#">Earrings</a>
<a href="#">Necklaces</a>
<a href="#">Rings</a>
<a href="#">Cufflinks</a>
</div>
</div>
</li>
<li><a class="menu-item" href="#">Women</a>
<div class="dropdown-nav">
<div class="dropdown-nav-item">
<a href="#"><b>Clothing</b></a>
<a href="#">Shirts</a>
<a href="#">Jackets</a>
<a href="#">Trousers</a>
<a href="#">Underwear</a>
<a href="#">Sports</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Shoes</b></a>
<a href="#">Boots</a>
<a href="#">Sneakers</a>
<a href="#">Sandals</a>
<a href="#">Loafers</a>
<a href="#">Brogues</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Accessories</b></a>
<a href="#">Glasses</a>
<a href="#">Gloves</a>
<a href="#">Hats</a>
<a href="#">Bags</a>
<a href="#">Belts</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Jewelry</b></a>
<a href="#">Bracelets</a>
<a href="#">Earrings</a>
<a href="#">Necklaces</a>
<a href="#">Rings</a>
<a href="#">Cufflinks</a>
</div>
</div>
</li>
<li><a class="menu-item" href="#">Kids</a>
<div class="dropdown-nav">
<div class="dropdown-nav-item">
<a href="#"><b>Clothing</b></a>
<a href="#">Shirts</a>
<a href="#">Jackets</a>
<a href="#">Trousers</a>
<a href="#">Underwear</a>
<a href="#">Sports</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Shoes</b></a>
<a href="#">Boots</a>
<a href="#">Sneakers</a>
<a href="#">Sandals</a>
<a href="#">Loafers</a>
<a href="#">Brogues</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Accessories</b></a>
<a href="#">Glasses</a>
<a href="#">Gloves</a>
<a href="#">Hats</a>
<a href="#">Bags</a>
<a href="#">Belts</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Jewelry</b></a>
<a href="#">Bracelets</a>
<a href="#">Earrings</a>
<a href="#">Necklaces</a>
<a href="#">Rings</a>
<a href="#">Cufflinks</a>
</div>
</div>
</li>
<li><a class="menu-item" href="#">Accessories</a>
<div class="dropdown-nav">
<div class="dropdown-nav-item">
<a href="#"><b>All accessories</b></a>
<a href="#">Shirts</a>
<a href="#">Jackets</a>
<a href="#">Trousers</a>
<a href="#">Underwear</a>
<a href="#">Sports</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Wallets</b></a>
<a href="#">Boots</a>
<a href="#">Sneakers</a>
<a href="#">Sandals</a>
<a href="#">Loafers</a>
<a href="#">Brogues</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Sunglasses</b></a>
<a href="#">Glasses</a>
<a href="#">Gloves</a>
<a href="#">Hats</a>
<a href="#">Bags</a>
<a href="#">Belts</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Sale accessories</b></a>
<a href="#">Bracelets</a>
<a href="#">Earrings</a>
<a href="#">Necklaces</a>
<a href="#">Rings</a>
<a href="#">Cufflinks</a>
</div>
</div>
</li>
<li><a class="menu-item" href="#">Featured</a>
<div class="dropdown-nav">
<div class="dropdown-nav-item">
<a href="#"><b>Homeware</b></a>
<a href="#">Shirts</a>
<a href="#">Jackets</a>
<a href="#">Trousers</a>
<a href="#">Underwear</a>
<a href="#">Sports</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Decorative</b></a>
<a href="#">Boots</a>
<a href="#">Sneakers</a>
<a href="#">Sandals</a>
<a href="#">Loafers</a>
<a href="#">Brogues</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>All jewelery</b></a>
<a href="#">Glasses</a>
<a href="#">Gloves</a>
<a href="#">Hats</a>
<a href="#">Bags</a>
<a href="#">Belts</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Fine jewlery</b></a>
<a href="#">Bracelets</a>
<a href="#">Earrings</a>
<a href="#">Necklaces</a>
<a href="#">Rings</a>
<a href="#">Cufflinks</a>
</div>
</div>
</li>
<li><a class="menu-item" href="#">Hot Deals </a>
<div class="dropdown-nav">
<div class="dropdown-nav-item">
<a href="#"><b>Clothing</b></a>
<a href="#">Shirts</a>
<a href="#">Jackets</a>
<a href="#">Trousers</a>
<a href="#">Underwear</a>
<a href="#">Sports</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Shoes</b></a>
<a href="#">Boots</a>
<a href="#">Sneakers</a>
<a href="#">Sandals</a>
<a href="#">Loafers</a>
<a href="#">Brogues</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Accessories</b></a>
<a href="#">Glasses</a>
<a href="#">Gloves</a>
<a href="#">Hats</a>
<a href="#">Bags</a>
<a href="#">Belts</a>
</div>
<div class="dropdown-nav-item">
<a href="#"><b>Jewelry</b></a>
<a href="#">Bracelets</a>
<a href="#">Earrings</a>
<a href="#">Necklaces</a>
<a href="#">Rings</a>
<a href="#">Cufflinks</a>
</div>
</div>
</li>
</ul>
</nav>
CSS
.menu{
height: 51px;
display: flex;
justify-content: center;
width: 780px;
margin: 0 auto;
}
nav ul {
width: 680px;
height: 51px;
display: flex;
list-style-type: none;
justify-content: space-around;
}
nav li {
height: 51px;
line-height: 51px;
}
nav a {
opacity: 1;
color: #222222;
font-size: 14px;
line-height: 26px;
text-transform: uppercase;
text-decoration: none;
padding: 17px 7px;
position: relative;
}
nav a:visited {
color: #222222;
}
nav li:hover{
border-bottom: 2px solid #ef5b70;
}
nav li:hover .dropdown-nav{
display: flex;
}
.dropdown-nav{
display: none;
justify-content: center;
position: absolute;
background-color: #f1f1f1;
left: 0;
width: 100%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
height: 365px;
}
.dropdown-nav-item{
display: flex;
flex-direction: column;
align-items: flex-start;
margin-right: 100px;
}
.dropdown-nav-item a{
width: 100%;
}
.dropdown-nav-item h1{
margin-top: 30px;
color: #ef5b70;
font-size: 75px;
}
.dropdown-nav-item h1:hover{
background-color: transparent;!important;
}
.dropdown-nav-item a:hover{
background-color: #ddd;
}
Для удобства https://codepen.io/serg-yefr/pen/GRpPYrv
Заранее благодарен