Learn to create ‘multilevel drop down menu using HTML and CSS3' in easy steps. The CSS3 is used for a bit animation as well. Though you can customize it as per your need.
Multilevel drop-down menu can be very handy when there are many important links and all needed to be in main navigation bar.
For example, If your website offers many services, then you may like to place all your services under 'Services' menu item,
Like this:
Services
- Logo Designing
- Banner Designing
- 2D Graphic Designing
- 3D Graphic Designing
- .... .... ....
- .... .... ....
- .... .... ....
- Web Designing
- and so on..
Though there is no such rule, for easy user-interface we should do this. First of all, create a 'nav.html' and 'nav.css' in a directory - myFirstMenu.
We will be using the list for creating the structure for the drop-down menu.
HTML Code for our drop-down menu.
<link href="nav.css" type="text/css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<div class='navContainer'>
<nav>
<ul>
<li>
<a href='#'><i class='fa fa-home fa-fw'></i> Home</a>
</li>
<li>
<a href='#'><i class='fa fa-globe fa-fw'></i> About</a>
</li>
<li>
<a href='#'> Services <i class='fa fa-angle-right fa-fw'></i></a>
<!-- ----levelTwo---- -->
<ul class='levelTwo'>
<li>
<a href=''>item-level 2</a>
</li>
<li>
<a href=''>item-level 2</a>
</li>
<li>
<a href=''>item-level 2</a>
</li>
<li>
<a href=''>item-level 2 <i class='fa fa-angle-right fa-fw'></i></a>
<!-- ----levelThree---- -->
<ul class='levelThree'>
<li>
<a href=''>item-level 3 <i class='fa fa-angle-right fa-fw'></i></a>
<!-- ----levelFour---- -->
<ul class='levelFour'>
<li>
<a href=''>item-level 4</a>
</li>
<li>
<a href=''>item-level 4</a>
</li>
<li>
<a href=''>item-level 4</a>
</li>
<li>
<a href=''>item-level 4</a>
</li>
<li>
<a href=''>item-level 4</a>
</li>
<li>
<a href=''>item-level 4</a>
</li>
</ul>
<!-- ----levelFour---- -->
</li>
<li>
<a href=''>item-level 3</a>
</li>
<li>
<a href=''>item-level 3</a>
</li>
<li>
<a href=''>item-level 3</a>
</li>
<li>
<a href=''>item-level 3</a>
</li>
</ul>
<!-- ----levelThree---- -->
</li>
<li>
<a href=''> item-level 2</a>
</li>
</ul>
<!-- ----levelTwo---- -->
</li>
<li>
<a href='#'><i class='fa fa-envelope-o fa-fw'></i> Contact</a>
</li>
<li>
<a href='#'><i class='fa fa-pencil fa-fw'></i> Blog</a>
</li>
<li>
<a href='#'><i class='fa fa-map-marker fa-fw'></i> Categories</a>
</li>
<li>
<a href='#'><i class='fa fa-bell fa-fw'></i> Offers</a>
</li>
</ul>
</nav>
</div>As you have noticed there are icons in menu items. We have used 'Font-awesome' CDN for the icons. You may remove it if you don't need the icons.
Output : 
This is how it looks when we run it in the browser.
Styling drop-down menu with CSS
The basic CSS for the drop-down menu to arrange it horizontally.
/*HTML and CSS only multilevel drop down menu*/
*,
html {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration: none;
/*Remove underline on anchors*/
}
ul {
list-style: none;
/* Rmove list styles*/
}
/*-- parent nav--*/
.navContainer {
background: #16acff;
padding: 5px;
}
.navContainer nav {
max-width: 920px;
margin: auto;
}
.navContainer nav >ul >li {
display: inline-block;
}Before we proceed, we will design our anchors and icons first.
.navContainer nav li >a {
display: block;
position: relative;
padding: 10px 15px;
border-bottom: 1px solid #ccc;
min-width: 96px;
background: #f0f0f0;
color: #555;
text-align: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}Now moving forward to design the first-level drop down menu
nav >ul >li >ul {
position: absolute;
border: 1px solid #16acff
}
As we can see all our anchors in parent and dropdown child has been designed. Now we will simply hide all the drop-down menu. To do that we modify previously added CSS and do the same for second and third level drop down menu -
Adding display: none in the previous CSS
nav >ul >li >ul {
position: absolute;
border: 1px solid #16acff;
display: none
}
nav >ul >li >ul >li >ul,
nav >ul >li >ul >li >ul>li>ul {
position: absolute;
left: 100%;
width: 140px;
top: 0px;
display: none;
z-index: 2;
border: 1px solid #16acff;
}Now, we have set all the drop down level menus to display:none . Now we have to show them when we hover the particular menu item. To do so we write some more css
/*-- Display on hover--*/
nav >ul >li:hover >ul,
nav >ul >li >ul >li:hover >ul,
nav >ul >li >ul >li>ul>li:hover ul {
display: block;
}
So, we have got the desired behaviour of our multi-level drop-down menu. But we need to set little bit spacing and alignment from the top for our second and third level menu.
nav li {
position: relative;
}
nav >ul >li >ul >li {
width: 140px
}All set. We have successfully created our multi-level drop-down menu.
CSS3 and animation
Now it is time to add some CSS3 effects and animation to make it more good looking.
First, we will design our parent menu items on hover.
nav >ul >li:after {
content: '';
height: 2px;
width: 2px;
background: #000;
color: #fff;
opacity: 0;
bottom: 0px;
left: 0px;
position: absolute;
}
nav >ul >li:hover:after {
content: '';
opacity: 1;
height: 2px;
width: 100%;
transition: 0.5s;
}Now, we will use CSS3 keyframe animation to add effects to the deep level menu.
/*-- Animation--*/
@keyframes threeD {
0% {
transform: perspective( 400px) rotateY( 0deg);
opacity: 0;
left: 150%;
top: 150%;
}
20% {
transform: perspective( 400px) rotateY( -45deg);
opacity: 0.2;
left: 140%;
top: 140%;
}
40% {
transform: perspective( 400px) rotateY( -45deg);
opacity: 0.4;
left: 130%;
top: 130%;
}
60% {
transform: perspective( 400px) rotateY( -45deg);
opacity: 0.6;
left: 120%;
top: 120%;
}
80% {
transform: perspective( 400px) rotateY( -45deg);
opacity: 0.8;
left: 110%;
top: 110%;
}
100% {
transform: perspective( 400px) rotateY( -45deg);
left: 100%;
top: 100%;
opacity: 1;
}
}Now we will add the animation name to our deep level drop-down menu. Simply add the animation name where we have used display:none above.
nav >ul >li >ul >li >ul,
nav >ul >li >ul >li >ul>li>ul {
position: absolute;
left: 100%;
width: 140px;
top: 0px;
display: none;
z-index: 2;
border: 1px solid #16acff;
/* animation name */
-webkit-animation: threeD .1s;
/* Chrome, Safari, Opera */
animation: threeD .1s;
}It is not recommended to use the specificity to select the deep level of elements as used in above example. We can simply add the classes for selecting and designing that element. So, the classes are already added in HTML markup. Just use those classes to create the same menu and learn.