In this tutorial we will see how to create a Dropdown Menu with Submenu using HTML and CSS. For this we have used pure CSS, you can add as much submenus in this dropdown menu as you want.
Table of Contents
HTML Code
Take a look at the HTML code given below.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Dropdown Menu with Submenu using HTML and CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrap">
<nav>
<ul class="primary">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul class="sub">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
</div>
</body>
</html>
CSS Code
CSS code is given below.
<style>
body {
background: #ccc;
font-family: monospace;
text-transform: uppercase;
text-align: center;
}
.wrap {
display: inline-block;
}
a {
text-decoration: none;
color: #fff;
display: block;
}
ul {
list-style: none;
background: #d95b34;
position: relative;
padding: 0;
}
li {
float: left;
font-size: 15px;
}
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #0E0E0E;
box-shadow: 2px 2px 3px #888;
}
ul.primary li a {
display: block;
padding: 20px 30px;
border-right: 1px solid #3D3D3D;
}
ul.primary li:last-child a {
border-right: none;
}
ul.primary li a:hover {
color: #000;
}
ul.sub {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 35%;
display:none;
}
ul.sub li {
float: none;
margin: 0;
}
ul.sub li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 30px;
}
ul.sub li:last-child a {
border-bottom: none;
}
ul.primary li:hover ul {
display: block;
}
ul.primary li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.primary li:hover > a{
color: #000;
}
ul.sub li a:hover {
color: #fff;
background: #d95b34;
}
</style>
Video Tutorial
Watch our video tutorial on Dropdown Menu with Submenu using HTML and CSS.