In this article, we’ll show you how to create a Dropdown Menu Using HTML and CSS. This type of Dropdown Menu is used on the websites for Menu. This kind of Dropdown Menu looks attractive on website.
You easily create this Dropdown Menu With Font Icon Using HTML and CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Pure CSS Dropdown Menu
In this Dropdown Menu, The Dropdown Menu is a sub-menu that appears when visitors of any website hover on the main menu. When someone hovers on any nav-item of the main menu, the submenu associated with it will appear at the main menu’s bottom. So when a sub-menu appears, visitors can click on one of them to visit the other pages linked to it. Dropdown menus are mostly used for multi-page websites where lots of web pages were built during the development process. If you are feeling difficult to understand then you can watch a full video tutorial on this Pure CSS Dropdown Menu.
Watch the video tutorial to create Pure CSS Dropdown Menu
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Dropdown Menu With Submenu step by step completely beautifully. So you can learn how to make these Pure CSS Dropdown Menu. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Dropdown Menu Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Sticky Navigation Bar On Scroll Using JS
- Responsive Sidebar Menu Using HTML, CSS & JS
- Responsive Footer Design using HTML & CSS
Pure CSS Dropdown Menu | Source Codes
You have to create an HTML and CSS File For this Dropdown menu. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DropDown Menu</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----FontAwesome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>
<div class="body">
<!-- mega menu -->
<ul class="sky-mega-menu sky-mega-menu-anim-flip sky-mega-menu-response-to-icons">
<!-- home -->
<li>
<a href="#"><i class="fa fa-single fa-home"></i></a>
</li>
<!--/ home -->
<!-- about -->
<li aria-haspopup="true">
<a href="#"><i class="fa fa-star"></i>About us<i class="fa fa-indicator fa-chevron-down"></i></a>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
<li aria-haspopup="true">
<a href="#"><i class="fa fa-group"></i><i class="fa fa-indicator fa-chevron-right"></i>Our Team</a>
<div class="grid-container3">
<ul>
<li aria-haspopup="true">
<a href="#"><i class="fa fa-male"></i><i class="fa fa-indicator fa-chevron-right"></i>Markus Fisher</a>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
<li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
<li><a href="#"><i class="fa fa-comments"></i>Contacts</a></li>
</ul>
</div>
</li>
<li aria-haspopup="true">
<a href="#"><i class="fa fa-female"></i><i class="fa fa-indicator fa-chevron-right"></i>Leyla Sparks</a>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
<li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
<li><a href="#"><i class="fa fa-comments"></i>Contacts</a></li>
</ul>
</div>
</li>
<li aria-haspopup="true">
<a href="#"><i class="fa fa-male"></i><i class="fa fa-indicator fa-chevron-right"></i>Gleb Ismailov</a>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
<li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
<li><a href="#"><i class="fa fa-comments"></i>Contacts</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a>
</li>
</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></a>
</li>
<li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></a>
</li>
</ul>
</div>
</li>
<!--/ about -->
<!-- news -->
<li aria-haspopup="true">
<a href="#"><i class="fa fa-bullhorn"></i>News<i class="fa fa-indicator fa-chevron-down"></i></a>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="fa fa-check"></i>Company</a></li>
<li><a href="#"><i class="fa fa-check"></i>Products</a></li>
<li><a href="#"><i class="fa fa-check"></i>Specials</a></li>
</ul>
</div>
</li>
<!--/ news -->
<!-- portfolio -->
<li aria-haspopup="true">
<a href="#"><i class="fa fa-briefcase"></i>Portfolio<i class="fa fa-indicator fa-chevron-down"></i></a>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="fa fa-lemon-o"></i>Logos</a></li>
<li><a href="#"><i class="fa fa-globe"></i>Websites</a></li>
<li><a href="#"><i class="fa fa-th-large"></i>Branding</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i>Illustrations</a></li>
</ul>
</div>
</li class="right">
<!--/ portfolio -->
<!-- blog -->
<li>
<a href="#"><i class="fa fa-edit"></i>Blog</a>
</li>
<!--/ blog -->
<!-- contacts -->
<li class="right">
<a href="#"><i class="fa fa-phone"></i>Contacts</a>
</li>
<!--/ contacts -->
</ul>
<!--/ mega menu -->
</div>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
html,
body,
aside {
display: block;
margin: 0;
padding: 0;
}
body {
padding: 40px;
background-attachment: fixed;
background-position: 50% 0;
background-size: cover;
background-color: #133847;
}
aside {
width: 233px;
min-height: 500px;
}
aside.right {
margin-left: auto;
}
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
.bg-red {
background-image: url(../img/bg-red.jpg);
}
.bg-orange {
background-image: url(../img/bg-orange.jpg);
}
.bg-yellow {
background-image: url(../img/bg-yellow.jpg);
}
.bg-green {
background-image: url(../img/bg-green.jpg);
}
.bg-cyan {
background-image: url(../img/bg-cyan.jpg);
}
.bg-blue {
background-image: url(../img/bg-blue.jpg);
}
.bg-purple {
background-image: url(../img/bg-purple.jpg);
}
.bg-pink {
background-image: url(../img/bg-pink.jpg);
}
.bg-black {
background-image: url(../img/bg-black.jpg);
}
.body {
max-width: 1200px;
margin: 0 auto;
}
@media screen and (max-width: 1000px) {
body {
padding: 20px;
}
}
@media screen and (max-width: 767px) {
body {
padding: 10px;
}
aside {
width: auto;
}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
/**/
/* defaults */
/**/
.sky-mega-menu,
.sky-mega-menu * {
margin: 0;
padding: 0;
outline: none;
border: 0;
background: none;
}
.sky-mega-menu {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/**/
/* level 1 */
/**/
.sky-mega-menu {
position: relative;
z-index: 999;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
font-size: 0;
line-height: 0;
text-align: right;
}
.sky-mega-menu:after {
content: "";
display: table;
clear: both;
}
.sky-mega-menu li {
position: relative;
display: inline-block;
float: left;
padding: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1);
border-right-width: 1px;
font-size: 13px;
line-height: 45px;
text-align: left;
white-space: nowrap;
}
.sky-mega-menu li a {
display: block;
padding: 0 20px;
text-decoration: none;
color: #666;
transition: background 0.4s, color 0.4s;
-o-transition: background 0.4s, color 0.4s;
-ms-transition: background 0.4s, color 0.4s;
-moz-transition: background 0.4s, color 0.4s;
-webkit-transition: background 0.4s, color 0.4s;
}
.sky-mega-menu li > div {
position: absolute;
z-index: 1000;
top: 100%;
left: -9999px;
margin-top: 8px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
opacity: 0;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transition: -o-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.sky-mega-menu li > div:after {
content: "";
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 8px;
background: transparent;
}
.sky-mega-menu li > div:before {
content: "";
position: absolute;
bottom: 100%;
left: 24px;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(255, 255, 255, 0.9);
border-left: 5px solid transparent;
}
.sky-mega-menu li:hover > a,
.sky-mega-menu li.current > a {
background: #2da5da;
color: #fff;
}
.sky-mega-menu li:hover > div {
left: 0;
opacity: 1;
-webkit-transform: translate(0, 0);
}
.sky-mega-menu .right {
float: none;
border-right-width: 0;
border-left-width: 1px;
}
.sky-mega-menu .right > div {
-o-transform-origin-x: 100%;
-ms-transform-origin-x: 100%;
-moz-transform-origin-x: 100%;
-webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right:hover > div {
right: 0;
left: auto;
}
.sky-mega-menu .right:hover > div:before {
right: 24px;
left: auto;
}
.sky-mega-menu .switcher {
display: none;
}
/**/
/* level 2+ */
/**/
.sky-mega-menu li li {
display: block;
float: none;
border-width: 0;
border-top-width: 1px;
line-height: 21px;
white-space: normal;
}
.sky-mega-menu li li:first-child {
border-top: 0;
}
.sky-mega-menu li li a {
padding-top: 12px;
padding-bottom: 12px;
}
.sky-mega-menu li li > div {
top: 0;
margin: 0 0 0 8px;
}
.sky-mega-menu li li > div:after {
top: 0;
right: 100%;
bottom: auto;
left: auto;
width: 8px;
height: 100%;
}
.sky-mega-menu li li > div:before {
top: 22px;
right: 100%;
bottom: auto;
left: auto;
border-top: 5px solid transparent;
border-right: 5px solid rgba(255, 255, 255, 0.9);
border-bottom: 5px solid transparent;
}
.sky-mega-menu li li:hover > div {
left: 100%;
}
.sky-mega-menu .right li > div {
margin: 0 8px 0 0;
-o-transform-origin-x: 100%;
-ms-transform-origin-x: 100%;
-moz-transform-origin-x: 100%;
-webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right li > div:after {
right: auto;
left: 100%;
}
.sky-mega-menu .right li > div:before {
right: auto;
left: 100%;
border-right: none;
border-left: 5px solid rgba(255, 255, 255, 0.9);
}
.sky-mega-menu .right li:hover > div {
right: 100%;
left: auto;
}
/**/
/* positions */
/**/
.sky-mega-menu-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sky-mega-menu-pos-bottom li > div {
top: auto;
bottom: 100%;
margin: 0 0 8px;
-o-transform-origin-y: 100%;
-ms-transform-origin-y: 100%;
-moz-transform-origin-y: 100%;
-webkit-transform-origin-y: 100%;
}
.sky-mega-menu-pos-bottom li > div:after {
top: 100%;
bottom: auto;
}
.sky-mega-menu-pos-bottom li > div:before {
top: 100%;
bottom: auto;
border-top: 5px solid rgba(255, 255, 255, 0.9);
border-right: 5px solid transparent;
border-bottom: none;
border-left: 5px solid transparent;
}
.sky-mega-menu-pos-bottom li li > div {
top: auto;
bottom: 0;
}
.sky-mega-menu-pos-bottom li li > div:before {
top: auto;
bottom: 22px;
}
.sky-mega-menu-pos-bottom.sky-mega-menu-fixed {
top: auto;
bottom: 0;
}
.sky-mega-menu-pos-left li,
.sky-mega-menu-pos-right li {
display: block;
float: none;
border-width: 0;
border-top-width: 1px;
}
.sky-mega-menu-pos-left li:first-child,
.sky-mega-menu-pos-right li:first-child {
border-top: 0;
}
.sky-mega-menu-pos-left li > div,
.sky-mega-menu-pos-right li > div {
top: 0;
}
.sky-mega-menu-pos-left li > div {
margin: 0 0 0 8px;
}
.sky-mega-menu-pos-right li > div {
margin: 0 8px 0 0;
-o-transform-origin-x: 100%;
-ms-transform-origin-x: 100%;
-moz-transform-origin-x: 100%;
-webkit-transform-origin-x: 100%;
}
.sky-mega-menu-pos-left li > div:after,
.sky-mega-menu-pos-right li > div:after {
top: 0;
bottom: auto;
width: 8px;
height: 100%;
}
.sky-mega-menu-pos-left li > div:after {
right: 100%;
left: auto;
}
.sky-mega-menu-pos-right li > div:after {
right: auto;
left: 100%;
}
.sky-mega-menu-pos-left li > div:before,
.sky-mega-menu-pos-right li > div:before {
top: 22px;
bottom: auto;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.sky-mega-menu-pos-left li > div:before {
right: 100%;
left: auto;
border-right: 5px solid rgba(255, 255, 255, 0.9);
}
.sky-mega-menu-pos-right li > div:before {
right: auto;
left: 100%;
border-left: 5px solid rgba(255, 255, 255, 0.9);
}
.sky-mega-menu-pos-left li:hover > div {
left: 100%;
}
.sky-mega-menu-pos-right li:hover > div {
right: 100%;
left: auto;
}
.sky-mega-menu-pos-left .bottom > div,
.sky-mega-menu-pos-right .bottom > div {
top: auto;
bottom: 0;
-o-transform-origin-y: 100%;
-ms-transform-origin-y: 100%;
-moz-transform-origin-y: 100%;
-webkit-transform-origin-y: 100%;
}
.sky-mega-menu-pos-left .bottom > div:before,
.sky-mega-menu-pos-right .bottom > div:before {
top: auto;
bottom: 22px;
}
.sky-mega-menu-pos-right li li > div {
margin: 0 8px 0 0;
-o-transform-origin-x: 100%;
-ms-transform-origin-x: 100%;
-moz-transform-origin-x: 100%;
-webkit-transform-origin-x: 100%;
}
.sky-mega-menu-pos-right li li > div:after {
right: auto;
left: 100%;
}
.sky-mega-menu-pos-right li li > div:before {
right: auto;
left: 100%;
border-right: none;
border-left: 5px solid rgba(255, 255, 255, 0.9);
}
.sky-mega-menu-pos-right li li:hover > div {
right: 100%;
left: auto;
}
.sky-mega-menu-pos-left.sky-mega-menu-fixed {
top: 0;
right: auto;
bottom: 0;
left: 0;
width: auto;
}
.sky-mega-menu-pos-right.sky-mega-menu-fixed {
top: 0;
right: 0;
bottom: 0;
left: auto;
width: auto;
}
/**/
/* animations */
/**/
.sky-mega-menu-anim-slide li > div {
-o-transform: translate(0, 60px);
-ms-transform: translate(0, 60px);
-moz-transform: translate(0, 60px);
-webkit-transform: translate(0, 60px);
}
.sky-mega-menu-pos-bottom.sky-mega-menu-anim-slide li > div {
-o-transform: translate(0, -60px);
-ms-transform: translate(0, -60px);
-moz-transform: translate(0, -60px);
-webkit-transform: translate(0, -60px);
}
.sky-mega-menu-anim-slide li:hover > div {
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
.sky-mega-menu-anim-scale li > div {
-o-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
}
.sky-mega-menu-anim-scale li:hover > div {
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
.sky-mega-menu-anim-flip {
perspective: 2000px;
-o-perspective: 2000px;
-moz-perspective: 2000px;
-webkit-perspective: 2000px;
}
.sky-mega-menu-anim-flip li > div {
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(-75deg);
-o-transform: rotateX(-75deg);
-moz-transform: rotateX(-75deg);
-webkit-transform: rotateX(-75deg);
}
.sky-mega-menu-anim-flip li:hover > div {
transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
/**/
/* grid */
/**/
.sky-mega-menu .grid-column {
float: left;
border-color: #d9d9d9;
border-left-width: 1px;
border-left-style: solid;
}
.sky-mega-menu .grid-column:first-child {
margin-left: 0;
border-left: 0;
}
.sky-mega-menu .grid-column2,
.sky-mega-menu .grid-container2 {
width: 155px;
}
.sky-mega-menu .grid-column3,
.sky-mega-menu .grid-container3 {
width: 233px;
}
.sky-mega-menu .grid-column4,
.sky-mega-menu .grid-container4 {
width: 311px;
}
.sky-mega-menu .grid-column5,
.sky-mega-menu .grid-container5 {
width: 389px;
}
.sky-mega-menu .grid-column6,
.sky-mega-menu .grid-container6 {
width: 467px;
}
.sky-mega-menu .grid-column7,
.sky-mega-menu .grid-container7 {
width: 545px;
}
.sky-mega-menu .grid-column8,
.sky-mega-menu .grid-container8 {
width: 623px;
}
.sky-mega-menu .grid-column9,
.sky-mega-menu .grid-container9 {
width: 701px;
}
.sky-mega-menu .grid-column10,
.sky-mega-menu .grid-container10 {
width: 779px;
}
.sky-mega-menu .grid-column11,
.sky-mega-menu .grid-container11 {
width: 857px;
}
.sky-mega-menu .grid-column12,
.sky-mega-menu .grid-container12 {
width: 935px;
}
/**/
/* icons */
/**/
.sky-mega-menu li a > .fa {
display: block;
float: left;
width: 16px;
margin: 0 10px 0 -4px;
font-size: 16px;
line-height: inherit;
text-align: center;
}
.sky-mega-menu li a > .fa-single {
float: none;
margin: 0;
}
.sky-mega-menu li a > .fa-indicator {
position: relative;
top: -1px;
float: none;
display: inline-block;
vertical-align: middle;
width: auto;
margin: 0 -10px 0 10px;
font-size: 9px;
line-height: 1;
text-align: right;
}
.sky-mega-menu li li a > .fa-indicator {
top: 0;
float: right;
display: block;
line-height: inherit;
}
now you’ve successfully created these Dropdown Menu. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
