HTML CSS Dropdown Menu Using Flexbox Basic Concept

 

Flexbox CSS Dropdown Menu -> This Menu Using pure css and html to create flexbox dropdown menu for web page.

This is HTML Structure for the Menu

<nav class="main-nav">
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropbtn"><a href="#">Service <i
class="fa fa-chevron-circle-down"
aria-hidden="true"
></i></a>
<ul class="dropdown">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li class="dropbtn"><a href="#">Page <i
class="fa fa-chevron-circle-down"
aria-hidden="true"
></i></a>
<ul class="dropdown">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</li>
</ul>
</nav>
This is Css Code for Dropdown Menu .main-nav .navbar {
list-style-type: none;
background-color: #333;
}
.navbar {
display: flex;
align-items: center;
}
.navbar a {
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar li a {
color: #fff;
text-decoration: none;
padding: 14px 16px;
position: relative;
display: inline-block;
}
.navbar li a:hover {
background-color: red;
}
.dropdown {
display: none;
flex-direction: column;
background-color: aliceblue;
position: absolute;
list-style-type: none;
width: 160px;
} .dropdown li a {
text-align: left;
color: #333;
display: inline-block;
width: 100%;
}
.dropdown li a:hover {
background-color: #b6b6b6;
color: #fff;
}
.dropbtn:hover .dropdown {
display: flex;
}