MEGA MENU No 7 

  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
<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>