<html lang="en">
<head>
<title>MEGA MENU-6</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
/* #Resets –––––––––––––––––––––––––––––––––––––––––––––––––– */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
/* #Universal and Default Styles –––––––––––––––––––––––––––– */
body {color:#fff;font:14px arial;line-height: 1;margin: 0;padding: 0;text-align:left;}
a {text-decoration: none;}
.container {margin:auto;width:auto;}
.ul-reset {padding-left: 0;margin-top: 0;margin-bottom: 0;list-style: none;}
/* #Navigation Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {background: #400030;font-size:0;position: relative;}
nav > ul > li {display: inline-block;font-size: 14px;padding:0 10px;position: relative;}
nav > ul > li:first-child {padding-left:5px;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {color: #fff;display: block;position: relative;padding:10px 0;border-bottom: 3px solid transparent;}
nav > ul > li:hover > a {background:#661111;color:#ffff00;border-bottom: 3px solid #00FF00;}
/* #Mega Menu Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu4 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:1040px;}
.mega-menu3 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:780px;}
.mega-menu2 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:520px;}
.mega-menu1 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:260px;}
.mega-menu4 h3 {color: #FFFF00;}
.mega-menu3 h3 {color: #FFFF00;}
.mega-menu2 h3 {color: #FFFF00;}
.mega-menu1 h3 {color: #FFFF00;}
.mega-menu4 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu4 ul:last-child {margin-right: 0;}
.mega-menu4 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu4 a:hover {color: #FFFF00;}
.mega-menu3 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu3 ul:last-child {margin-right: 0;}
.mega-menu3 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu3 a:hover {color: #FFFF00;}
.mega-menu2 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu2 ul:last-child {margin-right: 0;}
.mega-menu2 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu2 a:hover {color: #FFFF00;}
.mega-menu1 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu1 ul:last-child {margin-right: 0;}
.mega-menu1 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu1 a:hover {color: #FFFF00;}
/* #Droppable Class Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {position: relative;}
.droppable > a:after {content: "▼";font:12px arial;padding-left:6px;position:relative;top:-1px;}
.droppable:hover .mega-menu4 {display:block;}
.droppable:hover .mega-menu3 {display:block;}
.droppable:hover .mega-menu2 {display:block;}
.droppable:hover .mega-menu1 {display:block;}
/* #Browser Clearfix –––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before, .cf:after {content: " "; /* 1 */ display: table; /* 2 */}
.cf:after {clear: both;}
</style>
<section class="container">
</section><!-- .container -->
<nav>
<ul class="container ul-reset">
<li><a href='#'>HOME</a></li>
<li class='droppable'>
<a href='#'>4-COLUMNS</a>
<div class='mega-menu4'>
<div class="container cf">
<ul class="ul-reset">
<h3>Heading 1</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 2</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 3</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 4</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
</div><!-- .container -->
</div><!-- .mega-menu -->
</li><!-- .droppable -->
<li class='droppable'>
<a href='#'>3-COLUMNS</a>
<div class='mega-menu3'>
<div class="container cf">
<ul class="ul-reset">
<h3>Heading 1</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 2</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 3</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
</div><!-- .container -->
</div><!-- .mega-menu-->
</li><!-- .droppable -->
<li class='droppable'>
<a href='#'>2-COLUMNS</a>
<div class='mega-menu2'>
<div class="container cf">
<ul class="ul-reset">
<h3>Heading 1</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
<ul class="ul-reset">
<h3>Heading 2</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
</div><!-- .container -->
</div><!-- .mega-menu-->
</li><!-- .droppable -->
<li class='droppable'>
<a href='#'>1-COLUMN</a>
<div class='mega-menu1'>
<div class="container cf">
<ul class="ul-reset">
<h3>Heading 1</h3>
<li><a href='#'>PAGE-1</a></li>
<li><a href='#'>PAGE-2</a></li>
<li><a href='#'>PAGE-3</a></li>
<li><a href='#'>PAGE-4</a></li>
<li><a href='#'>PAGE-5</a></li>
</ul><!-- .ul-reset -->
</div><!-- .container -->
</div><!-- .mega-menu-->
</li><!-- .droppable -->
<li><a href='#'>ABOUT US</a></li>
<li><a href='#'>CONTACT</a></li>
</ul><!-- .container .ul-reset -->
</nav>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.