In this blog post we you'll learn how to create multi drop down menu using HTML & CSS. Navigation menu is a important part of every website. Which let user to navigate the website easily.
We'll make the simple navigation bar using just HTML and CSS. Initially submenu or dropdown menu is not visible, but when user hover on menu option, if their is submenu in it, it will appeare. See below image of our dropdown menu. This menu is not responsive but you can create responsive navigation menu using CSS media query and JavaScript for show and hide functionality.
I have used the fruits and vegetable names as examples to make the menu options its catagories etc. You can see the below video tutorial of making this dropdown menu using HTML & CSS. You'll find full source code below the blog post.
Video Tutorial: Dropdown Menu Using HTML & CSS.
Dropdown Menu
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<!-- Title -->
<div class="logo-text">MakeTechStuff</div>
<!-- Menu -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#"><p>Fruits</p><img src="image/arrow-down.png"></a>
<!-- Menu level 1 -->
<div class="submenu1">
<ul>
<li><a href="#">Mango</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Pineapple</a></li>
<li><a href="#"><p>More</p><img src="image/arrow-right.png"></a>
<!-- Menu level 2 -->
<div class="submenu2">
<ul>
<li><a href="#">Sapota</a></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Guava</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#"><p>Vegetables</p><img src="image/arrow-down.png"></a>
<!-- Menu level 1 -->
<div class="submenu1">
<ul>
<li><a href="#">Brinjal</a></li>
<li><a href="#">Potato</a></li>
<li><a href="#">Tomato</a></li>
<li><a href="#"><p>More</p><img src="image/arrow-right.png"></a>
<!-- menu level 2 -->
<div class="submenu2">
<ul>
<li><a href="#">Carrot</a></li>
<li><a href="#">Cabbage</a></li>
<li><a href="#">Cauliflower</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
img{
width: 15px;
height: 15px;
margin-left: 20px;
}
body{
background-color: #f649b9;
}
.container{
height: auto;
background-color: #fff;
display: flex;
padding: 0px 30px;
place-items: center;
justify-content: space-between;
}
.logo-text{
font-size: 25px;
font-weight: bold;
}
.menu{
position: relative;
}
.menu > ul {
display: flex;
}
.menu > ul > li{
list-style: none;
margin: 0px 9px;
transition: 0.2s;
}
.menu > ul > li:hover{
background-color: #f649b929;
}
.menu > ul > li > a{
color:#000;
text-decoration: none;
font-size: 25px;
margin: 16px 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* ------------------------------submenu1------------------------------ */
.submenu1{
position: absolute;
background-color: #fff;
display: none;
}
.submenu1 ul{
width: 160px;
}
.submenu1 ul li{
list-style: none;
position: relative;
}
.submenu1 ul li:hover{
background-color: #f649b929;
}
.submenu1 ul li a{
color:#000;
text-decoration: none;
font-size: 25px;
padding: 16px 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu ul li:hover .submenu1{
display: block;
}
/* -----------------------------submenu2------------------------------ */
.submenu2{
position: absolute;
background-color: #fff;
display: none;
top: 0%;
left: 100%;
}
.submenu1 ul li:hover .submenu2{
display: block;
}
You'll see demo in above video tutorial.
So that's how you can create dropdown menu using HTML & CSS. If you have any query or suggestion feel free to write in the comment section.
You may like:
- Responsive navigation menu using HTML CSS and JavaScript.
- Show and hide sidebar with just HTML & CSS.
- Close menu when click outside of it.
- Animated navigation menu with sliding hover effects.
- How to create an option or menu item selection animation using HTML CSS and JavaScript.
Share your thoughts.