Dropdown Menu with Sub menu Using HTML and CSS only

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers
Learn How to Create Navigation bar with Dropdown’s and Sub Menus Using HTML and CSS only

 

            

Result :

Navbar with dropdowns and Sub menu
Navbar with dropdowns and Sub menu

 

<!DOCTYPE html>
<html>
<head>
 <title>Navbar</title>
<style type="text/css">
 
 *{
 padding: 0px;
 margin: 0px;
}
body{
 font-family: arial;
}
nav{
 background-color: #005ece;
 border-bottom: 5px solid #a9a9a9;
}
ul{
 list-style: none;

}
nav ul li{
 display: inline-block;
 position: relative;
 padding: 10px;
}
li:hover{
 background-color: #07438a;
 color: white;
 border: 1px solid black;
 padding: 9px;
}
nav ul li ul {
 display: none;
 position: absolute;
 background-color: #a9a9a9;
 margin: 10px;
 left: -5px;
  border: 1px solid black;
}
nav ul li ul li{
 width: 200px;
}
nav ul li:hover ul{
 display: block;
}
nav ul li ul li ul{
 left: 210px;
 top:-3px;
}

nav ul li ul li ul li {
 display: none;
}
nav ul li ul li:hover ul li{
 display: block;
}
</style>

</head>
<body>

<nav>
 
 <ul>
<li>HOME</li>
<li>DrowpDowns
<ul>
<li>DropDown 1</li>
<li>DropDown 2</li>
<li>DropDown 3 with sub menu


<ul>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
</li>
<li>DropDown 4</li>
<li>DropDown 5</li>
<li>DropDown with sub menu

<ul>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
</li>
</ul>
</li>
<li>Feed</li>
<li>About us</li>
</ul>
</nav>

</body>
</html>

Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers