MEGA MENU No 6 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<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>