<!DOCTYPE html>
<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>
*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
body{line-height:1.2;font:14px arial;text-transform:uppercase;color:#fff}
a{text-decoration:none;color:#fff}
#mega-menu{background:#333;width:100%;position:relative}
#mega-menu:after{content:"";clear:both;display:block}
input{border:none;padding:10px;border-radius:10px}
nav{float:left;}
nav>ul{float:left;position:relative}
nav li{list-style:none;float:left}
nav .dropdown{position:relative}
nav li a{float:left;padding:5px}
nav li a:hover{background:#333;color:#FFF;}
nav li ul{display:none}
nav li:hover ul{display:inline}
nav li li{float:none}
nav .dropdown ul{position:absolute;left:0;top:100%;background:#333;color:#FFF;padding:20px 0;border-bottom:3px solid #00FF00}
nav .dropdown li{white-space:nowrap}
nav .dropdown li a{padding:10px 10px;font:14px arial;min-width:250px}
nav .mega-dropdown2{width:520px;position:absolute;top:100%;left:0;background:#333;color:#FFF;overflow:hidden;padding:10px 10px;border-bottom:3px solid #00FF00}
nav .mega-dropdown3{width:770px;position:absolute;top:100%;left:0;background:#333;color:#FFF;overflow:hidden;padding:10px 10px;border-bottom:3px solid #00FF00}
nav .mega-dropdown4{width:1020px;position:absolute;top:100%;left:0;background:#333;color:#FFF;overflow:hidden;padding:10px 10px;border-bottom:3px solid #00FF00}
nav li li a{float:none;color:#FFF;display:block;padding:10px 10px;border-radius:3px;font:14px arial}
nav li li a:hover{background:#400030;color:#FFF}
.mega-col{width:250px;float:left}
</style>
<script>
$('#mega-menu').prepend('<div id="menu-icon"><span class="first"></span><span class="second"></span><span class="third"></span></div>');
  
  $("#menu-icon").on("click", function(){
    $("nav").slideToggle();
    $(this).toggleClass("active");
});
</script>
<div id="mega-menu">
<nav>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">2-COLUMNS</a>
<ul class="mega-dropdown2">
<li class="row">
<ul class="mega-col">
              <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>
              <li><a href="#">PAGE-6</a></li>             
</ul>
<ul class="mega-col">
             <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>
              <li><a href="#">PAGE-6</a></li>             
</ul>
</li>
</ul>        
</li>
<li class="dropdown">
<a href="">1A COLUMN</a>
<ul>
              <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>        
</li>
<li class="dropdown">
<a href="">1B COLUMN</a>
<ul>
              <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>        
</li>
<li><a href="">4-COLUMNS</a>
<ul class="mega-dropdown4">
<li class="row">
<ul class="mega-col">
              <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>
              <li><a href="#">PAGE-6</a></li>
              <li><a href="#">PAGE-7</a></li>
              <li><a href="#">PAGE-8</a></li>
              <li><a href="#">PAGE-9</a></li>
        <li><a href="#">PAGE-10</a></li>
</ul>
<ul class="mega-col">
             <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>
              <li><a href="#">PAGE-6</a></li>
              <li><a href="#">PAGE-7</a></li>
              <li><a href="#">PAGE-8</a></li>
              <li><a href="#">PAGE-9</a></li>
        <li><a href="#">PAGE-10</a></li>
</ul>
<ul class="mega-col">
             <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>
              <li><a href="#">PAGE-6</a></li>
              <li><a href="#">PAGE-7</a></li>
              <li><a href="#">PAGE-8</a></li>
              <li><a href="#">PAGE-9</a></li>
        <li><a href="#">PAGE-10</a></li>
</ul>
<ul class="mega-col">
              <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>
              <li><a href="#">PAGE-6</a></li>
              <li><a href="#">PAGE-7</a></li>
              <li><a href="#">PAGE-8</a></li>
              <li><a href="#">PAGE-9</a></li>
        <li><a href="#">PAGE-10</a></li>
</ul>
</li>
</ul>        
</li>
<li><a href="">3-COLUMNS</a>
<ul class="mega-dropdown3">
<li class="row">
<ul class="mega-col">
              <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>
              <li><a href="#">PAGE-6</a></li>
              <li><a href="#">PAGE-7</a></li>
              <li><a href="#">PAGE-8</a></li>
              <li><a href="#">PAGE-9</a></li>
        <li><a href="#">PAGE-10</a></li>
</ul>
<ul class="mega-col">
             <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>
              <li><a href="#">PAGE-6</a></li>
              <li><a href="#">PAGE-7</a></li>
              <li><a href="#">PAGE-8</a></li>
              <li><a href="#">PAGE-9</a></li>
        <li><a href="#">PAGE-10</a></li>
</ul>
<ul class="mega-col">
              <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>
              <li><a href="#">PAGE-6</a></li>
              <li><a href="#">PAGE-7</a></li>
              <li><a href="#">PAGE-8</a></li>
              <li><a href="#">PAGE-9</a></li>
        <li><a href="#">PAGE-10</a></li>
</ul>
</li>
</ul>        
</li>
<li><a href="">ABOUT US</a></li>
</ul>
</nav>
</div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.