HTML
xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">3
4
<!-- Navbar brand -->5
<a class="navbar-brand text-uppercase" href="#">Navbar</a>6
7
<!-- Collapse button -->8
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"9
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">10
<span class="navbar-toggler-icon"></span>11
</button>12
13
<!-- Collapsible content -->14
<div class="collapse navbar-collapse" id="navbarSupportedContent2">15
16
<!-- Links -->17
<ul class="navbar-nav mr-auto">18
19
<!-- Features -->20
<li class="nav-item dropdown mega-dropdown active">21
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"22
aria-haspopup="true" aria-expanded="false">Features23
<span class="sr-only">(current)</span>24
</a>25
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">26
<div class="row">27
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">28
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>29
<ul class="list-unstyled">30
<li>31
<a class="menu-item pl-0" href="#!">32
<i class="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet33
</a>34
</li>35
<li>36
<a class="menu-item pl-0" href="#!">37
<i class="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit38
</a>39
</li>40
<li>41
<a class="menu-item pl-0" href="#!">42
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt43
</a>44
</li>45
<li>46
<a class="menu-item pl-0" href="#!">47
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna48
</a>49
</li>50
<li>51
<a class="menu-item pl-0" href="#!">52
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam53
</a>54
</li>55
</ul>56
</div>57
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">58
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>59
<ul class="list-unstyled">60
<li>61
<a class="menu-item pl-0" href="#!">62
<i class="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation63
</a>64
</li>65
<li>66
<a class="menu-item pl-0" href="#!">67
<i class="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in68
</a>69
</li>70
<li>71
<a class="menu-item pl-0" href="#!">72
<i class="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat73
</a>74
</li>75
<li>76
<a class="menu-item pl-0" href="#!">77
<i class="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate78
</a>79
</li>80
<li>81
<a class="menu-item pl-0" href="#!">82
<i class="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur83
</a>84
</li>85
</ul>86
</div>87
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">88
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>89
<ul class="list-unstyled">90
<li>91
<a class="menu-item pl-0" href="#!">92
<i class="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat93
</a>94
</li>95
<li>96
<a class="menu-item pl-0" href="#!">97
<i class="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia98
</a>99
</li>100
<li>101
<a class="menu-item pl-0" href="#!">102
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error103
</a>104
</li>105
<li>106
<a class="menu-item pl-0" href="#!">107
<i class="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum108
</a>109
</li>110
<li>111
<a class="menu-item pl-0" href="#!">112
<i class="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium113
</a>114
</li>115
</ul>116
</div>117
<div class="col-md-6 col-xl-3 sub-menu mb-0">118
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>119
<ul class="list-unstyled">120
<li>121
<a class="menu-item pl-0" href="#!">122
<i class="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque123
</a>124
</li>125
<li>126
<a class="menu-item pl-0" href="#!">127
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun128
</a>129
</li>130
<li>131
<a class="menu-item pl-0" href="#!">132
<i class="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi architecto133
</a>134
</li>135
<li>136
<a class="menu-item pl-0" href="#!">137
<i class="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem138
</a>139
</li>140
<li>141
<a class="menu-item pl-0" href="#!">142
<i class="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est143
</a>144
</li>145
</ul>146
</div>147
</div>148
</div>149
</li>150
<!-- Technology -->151
<li class="nav-item dropdown mega-dropdown">152
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"153
aria-haspopup="true" aria-expanded="false">Technology</a>154
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink3">155
<div class="row">156
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">157
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>158
<!--Featured image-->159
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">160
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg" class="img-fluid"161
alt="First sample image">162
<div class="mask rgba-white-slight"></div>163
</a>164
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>165
<p class="font-small text-uppercase white-text">166
<i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o px-1"167
aria-hidden="true"></i> 20168
</p>169
</div>170
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">171
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>172
<ul class="list-unstyled">173
<li>174
<a class="menu-item pl-0" href="#!">175
<i class="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation176
</a>177
</li>178
<li>179
<a class="menu-item pl-0" href="#!">180
<i class="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in181
</a>182
</li>183
<li>184
<a class="menu-item pl-0" href="#!">185
<i class="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat186
</a>187
</li>188
<li>189
<a class="menu-item pl-0" href="#!">190
<i class="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate191
</a>192
</li>193
<li>194
<a class="menu-item pl-0" href="#!">195
<i class="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur196
</a>197
</li>198
</ul>199
</div>200
<div class="col-md-6 col-xl-4 sub-menu mb-0">201
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>202
<ul class="list-unstyled">203
<li>204
<a class="menu-item pl-0" href="#!">205
<i class="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat206
</a>207
</li>208
<li>209
<a class="menu-item pl-0" href="#!">210
<i class="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia211
</a>212
</li>213
<li>214
<a class="menu-item pl-0" href="#!">215
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error216
</a>217
</li>218
<li>219
<a class="menu-item pl-0" href="#!">220
<i class="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum221
</a>222
</li>223
<li>224
<a class="menu-item pl-0" href="#!">225
<i class="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium226
</a>227
</li>228
</ul>229
</div>230
</div>231
</div>232
</li>233
<!-- Lifestyle -->234
<li class="nav-item dropdown mega-dropdown">235
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"236
aria-haspopup="true" aria-expanded="false">Lifestyle</a>237
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink4">238
<div class="row">239
<div class="col-md-6 col-xl-3 sub-menu mb-4">240
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>241
<ul class="list-unstyled">242
<li>243
<a class="menu-item pl-0" href="#!">244
<i class="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet245
</a>246
</li>247
<li>248
<a class="menu-item pl-0" href="#!">249
<i class="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit250
</a>251
</li>252
<li>253
<a class="menu-item pl-0" href="#!">254
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt255
</a>256
</li>257
<li>258
<a class="menu-item pl-0" href="#!">259
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna260
</a>261
</li>262
<li>263
<a class="menu-item pl-0" href="#!">264
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam265
</a>266
</li>267
</ul>268
</div>269
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">270
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>271
<!--Featured image-->272
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">273
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid"274
alt="First sample image">275
<div class="mask rgba-white-slight"></div>276
</a>277
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>278
<p class="font-small text-uppercase white-text">279
<i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o px-1"280
aria-hidden="true"></i> 20281
</p>282
</div>283
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">284
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>285
<!--Featured image-->286
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">287
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid"288
alt="First sample image">289
<div class="mask rgba-white-slight"></div>290
</a>291
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>292
<p class="font-small text-uppercase white-text">293
<i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="fa fa-comments-o px-1"294
aria-hidden="true"></i> 25295
</p>296
</div>297
<div class="col-md-6 col-xl-3 sub-menu mb-0">298
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>299
<ul class="list-unstyled">300
<li>301
<a class="menu-item pl-0" href="#!">302
<i class="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque303
</a>304
</li>305
<li>306
<a class="menu-item pl-0" href="#!">307
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun308
</a>309
</li>310
<li>311
<a class="menu-item pl-0" href="#!">312
<i class="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi architecto313
</a>314
</li>315
<li>316
<a class="menu-item pl-0" href="#!">317
<i class="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem318
</a>319
</li>320
<li>321
<a class="menu-item pl-0" href="#!">322
<i class="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est323
</a>324
</li>325
</ul>326
</div>327
</div>328
</div>329
</li>330
331
</ul>332
<!-- Links -->333
334
<!-- Search form -->335
<form class="form-inline">336
<div class="md-form my-0">337
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">338
</div>339
</form>340
341
</div>342
<!-- Collapsible content -->343
344
</nav>345
<!-- Navbar -->CSS
xxxxxxxxxx1
.dropdown:hover .dropdown-menu {display: block;}JS
1
1
Console errors: 0