PROWAREtech
CSS: Large Dropdown Menu
A responsive, large dropdown menu for sites with lots of menu options.
Create a huge dropdown menu for sites with very large content without using any JavaScript.
At 768 pixels and less, this menu disappears and a mobile hamburger menu button appears. This is because this type of menu system does not work well on small screens.
This menu is touch-device friendly as it works with taps to open it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tablet friendly, CSS huge dropdown menu</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: silver;
margin: 0;
padding: 0;
background-image: url(https://picsum.photos/id/1036/1920/1080);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
}
p {
margin: 10px;
}
/* DESKTOP CSS */
nav {
background-color: black;
height: 49px;
}
.menu-top {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
position: relative;
}
.menu-top > li {
display: inline-block;
width: 85px;
}
.menu-top > li > a {
color: slategray;
text-decoration: none;
display: block;
line-height: 49px;
border: none;
outline: none;
-webkit-appearance: none;
}
.menu-top > li:hover > a {
background-color: slategray;
color: white;
}
nav > div {
max-width: 768px; /* may be omitted or modified for greater menu width */
margin: 0 auto;
}
.menu-bottom {
color: white;
background-color: slategray;
position: absolute;
left: 0;
right: 0;
padding: 20px;
max-height: 0;
visibility: hidden;
overflow: auto;
transition: .4s linear .4s;
opacity: 0;
display: flex;
text-align: left;
}
.menu-top > li > a:focus {
background-color: slategray;
color: white;
}
/* this shows the menu bottom */
.menu-top > li > a:focus + .menu-bottom { /* > is immediate child selector and
+ is adjacent sibling selector */
visibility: visible;
opacity: 1;
max-height: 50vh;
text-align: left;
}
.menu-bottom li {
display: block;
margin-left: 16px;
}
.menu-bottom a {
color: inherit;
line-height: 20px;
}
.menu-bottom > div {
flex: 1 0 auto;
}
.menu-bottom ul {
padding: 16px;
}
.menu-bottom ul li > ul {
padding: 0;
}
.hamburger {
display: none;
}
.menu-top > .mobile-option {
display: none !important;
}
#mobilechk {
display: none;
}
/* MOBILE CSS */
@media screen and (max-width: 768px) {
.hamburger {
display: block;
padding: 10px;
margin: 13px 15px 0 0;
border: none;
cursor: pointer;
float: right;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
content: "";
position: relative;
display: block;
width: 21px;
height: 2px;
background-color: silver;
transition: .5s ease-in-out;
}
.hamburger span::before {
top: -8px;
}
.hamburger span::after {
top: 6px;
}
#mobilechk:checked ~ .menu-top {
visibility: visible;
transform: scale(1,1);
}
#mobilechk:checked ~ .menu-top a {
opacity: 1;
transition: .25s ease-in-out .25s;
}
#mobilechk:checked + .hamburger span {
transition: .3s linear;
transform: rotate(.375turn);
}
#mobilechk:checked + .hamburger span::before,
#mobilechk:checked + .hamburger span::after {
top: 0;
transition: .3s linear;
transform: rotate(90deg);
}
#mobilechk:checked + .hamburger span::after {
top: -2px;
}
.menu-top {
position: absolute;
visibility: hidden;
padding: 0;
margin: 0;
top: 49px;
height: auto;
background-color: black;
width: 100%;
transition: .25s ease-in-out .1s;
transform: scale(1,0);
transform-origin: top;
z-index: 1;
}
.menu-top li {
display: none;
}
.menu-top > .mobile-option {
text-align: right;
width: 100%;
display: block !important;
}
.menu-top > li > a:focus {
background-color: transparent;
}
.menu-top a {
display: inline;
opacity: 0;
line-height: 40px;
font-size: 20px;
padding-right: 15px;
transition: .1s ease-in-out;
}
.menu-bottom,
.menu-top > li > a:focus + .menu-bottom {
display: none;
}
.menu-top li:hover > a {
background-color: transparent;
}
}
</style>
</head>
<body>
<header>
<nav>
<div>
<input type="checkbox" id="mobilechk" />
<label class="hamburger" for="mobilechk">
<span></span>
</label>
<ul class="menu-top">
<li>
<a tabindex="1" href="#!">Home</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="https://www.google.com">google.com</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a tabindex="2" href="#!">About</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a tabindex="3" href="#!">Products</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a tabindex="4" href="#!">Cart</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a tabindex="5" href="#!">Contact</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a tabindex="6" href="#!">Forum</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a tabindex="7" href="#!">Search</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li class="mobile-option"><a href="#">Home</a></li>
<li class="mobile-option"><a href="#">About</a></li>
<li class="mobile-option"><a href="#">Products</a></li>
<li class="mobile-option"><a href="#">Cart</a></li>
<li class="mobile-option"><a href="#">Contact</a></li>
<li class="mobile-option"><a href="#">Forum</a></li>
<li class="mobile-option"><a href="#">Search</a></li>
<li class="mobile-option"><a href="#">Twitter</a></li>
<li class="mobile-option"><a href="#">Youtube</a></li>
</ul>
</div>
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
</main>
</body>
</html>
Coding Video for Above Code
This menu is similar to the above however the menu opens when the mouse hovers over it which is not too tablet/touch-device friendly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS huge dropdown menu</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: #eee;
margin: 0;
padding: 0;
background-image: url(https://picsum.photos/id/1036/1920/1080);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
}
/* DESKTOP CSS */
nav {
background-color: #333;
height: 49px;
}
.menu-top {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
position: relative;
}
.menu-top li {
display: inline-block;
width: 85px;
}
.menu-top li:hover {
background-color: #0094ff;
}
.menu-top li:hover::after {
content: "";
position: absolute;
border-style: solid;
border-color: #0094ff transparent transparent transparent;
border-width: 9px 14px 0 14px;
bottom: -9px;
transform: translateX(-16px);
}
.menu-top a {
color: #0094ff;
text-decoration: none;
display: block;
line-height: 49px;
}
.menu-top li:hover a {
color: #fff;
}
nav > div {
max-width: 768px; /* this can be removed for full screen width */
margin: 0 auto;
}
.menu-bottom {
color: #fff;
background-color: #00487d;
position: absolute;
display: none;
left: 0;
right: 0;
padding: 20px;
text-align: left;
max-height: 50vh;
overflow: auto;
}
/* this shows the bottom menus */
.menu-top li:hover .menu-bottom {
display: block;
}
.menu-bottom li:hover::after {
display: none;
}
.menu-bottom li {
display: block;
text-align: left;
margin-left: 16px;
}
.menu-bottom a {
color: inherit;
padding: 0;
background-color: #00487d;
line-height: 20px;
}
.menu-bottom div {
float: left;
padding: 16px;
}
.menu-bottom ul {
padding: 16px;
}
.menu-bottom ul li > ul {
padding: 0;
}
.menu-bottom h3:first-of-type {
margin-top: 0;
}
.hamburger {
display: none;
}
/* MOBILE CSS */
@media screen and (max-width: 768px) {
.hamburger {
display: block;
padding: 10px;
margin: 5px 15px 0 0;
background-color: #0094ff;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #fff;
margin-top: 4px;
}
#mobilechk:checked ~ .menu-top {
visibility: visible;
transform: scale(1,1);
}
#mobilechk:checked ~ .menu-top a {
opacity: 1;
transition: .25s ease-in-out .25s;
}
.menu-top { /* this is a ul */
position: absolute;
visibility: hidden;
padding: 0;
margin: 0;
list-style: none;
top: 49px;
height: auto;
background-color: #2686dc;
width: 100%;
transition: .25s ease-in-out .1s;
transform: scale(1,0);
transform-origin: top;
z-index: 1;
}
.menu-top li {
display: block;
margin: 0;
padding: 0;
text-align: right;
width: 100%;
}
.menu-top a {
display: inline;
opacity: 0;
line-height: 40px;
font-size: 20px;
padding-right: 15px;
transition: .1s ease-in-out;
color: #eee;
}
.menu-top a::after {
display: none;
}
.menu-bottom,
.menu-top li:hover .menu-bottom {
display: none;
}
.menu-top li:hover {
background-color: transparent;
}
}
</style>
</head>
<body>
<header>
<nav>
<div>
<input type="checkbox" id="mobilechk" style="display:none;" />
<label class="hamburger" for="mobilechk">
<span></span>
<span></span>
<span></span>
</label>
<ul class="menu-top">
<li>
<a href="#!">Home</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#!">About</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#!">Products</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#!">Cart</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#!">Contact</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#!">Forum</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#!">Search</a>
<div class="menu-bottom">
<div>
<h3>Heading</h3>
<ul>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
<li><a href="#!">Link</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
</main>
</body>
</html>
Coding Video for Above Code
Comment
