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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas 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="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi133
architecto134
</a>135
</li>136
<li>137
<a class="menu-item pl-0" href="#!">138
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem139
</a>140
</li>141
<li>142
<a class="menu-item pl-0" href="#!">143
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est144
</a>145
</li>146
</ul>147
</div>148
</div>149
</div>150
</li>151
<!-- Technology -->152
<li class="nav-item dropdown mega-dropdown">153
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"154
aria-haspopup="true" aria-expanded="false">Technology</a>155
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink3">156
<div class="row">157
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">158
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>159
<!--Featured image-->160
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">161
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg" class="img-fluid"162
alt="First sample image">163
<div class="mask rgba-white-slight"></div>164
</a>165
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>166
<p class="font-small text-uppercase white-text">167
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="far fa-comments px-1"168
aria-hidden="true"></i> 20169
</p>170
</div>171
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">172
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>173
<ul class="list-unstyled">174
<li>175
<a class="menu-item pl-0" href="#!">176
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation177
</a>178
</li>179
<li>180
<a class="menu-item pl-0" href="#!">181
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in182
</a>183
</li>184
<li>185
<a class="menu-item pl-0" href="#!">186
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat187
</a>188
</li>189
<li>190
<a class="menu-item pl-0" href="#!">191
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate192
</a>193
</li>194
<li>195
<a class="menu-item pl-0" href="#!">196
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur197
</a>198
</li>199
</ul>200
</div>201
<div class="col-md-6 col-xl-4 sub-menu mb-0">202
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>203
<ul class="list-unstyled">204
<li>205
<a class="menu-item pl-0" href="#!">206
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat207
</a>208
</li>209
<li>210
<a class="menu-item pl-0" href="#!">211
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia212
</a>213
</li>214
<li>215
<a class="menu-item pl-0" href="#!">216
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error217
</a>218
</li>219
<li>220
<a class="menu-item pl-0" href="#!">221
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum222
</a>223
</li>224
<li>225
<a class="menu-item pl-0" href="#!">226
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium227
</a>228
</li>229
</ul>230
</div>231
</div>232
</div>233
</li>234
<!-- Lifestyle -->235
<li class="nav-item dropdown mega-dropdown">236
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"237
aria-haspopup="true" aria-expanded="false">Lifestyle</a>238
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink4">239
<div class="row">240
<div class="col-md-6 col-xl-3 sub-menu mb-4">241
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>242
<ul class="list-unstyled">243
<li>244
<a class="menu-item pl-0" href="#!">245
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet246
</a>247
</li>248
<li>249
<a class="menu-item pl-0" href="#!">250
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit251
</a>252
</li>253
<li>254
<a class="menu-item pl-0" href="#!">255
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt256
</a>257
</li>258
<li>259
<a class="menu-item pl-0" href="#!">260
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna261
</a>262
</li>263
<li>264
<a class="menu-item pl-0" href="#!">265
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam266
</a>267
</li>268
</ul>269
</div>270
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">271
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>272
<!--Featured image-->273
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">274
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid"275
alt="First sample image">276
<div class="mask rgba-white-slight"></div>277
</a>278
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>279
<p class="font-small text-uppercase white-text">280
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="far fa-comments px-1"281
aria-hidden="true"></i> 20282
</p>283
</div>284
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">285
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>286
<!--Featured image-->287
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">288
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid"289
alt="First sample image">290
<div class="mask rgba-white-slight"></div>291
</a>292
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>293
<p class="font-small text-uppercase white-text">294
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="far fa-comments px-1"295
aria-hidden="true"></i> 25296
</p>297
</div>298
<div class="col-md-6 col-xl-3 sub-menu mb-0">299
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>300
<ul class="list-unstyled">301
<li>302
<a class="menu-item pl-0" href="#!">303
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque304
</a>305
</li>306
<li>307
<a class="menu-item pl-0" href="#!">308
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun309
</a>310
</li>311
<li>312
<a class="menu-item pl-0" href="#!">313
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi314
architecto315
</a>316
</li>317
<li>318
<a class="menu-item pl-0" href="#!">319
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem320
</a>321
</li>322
<li>323
<a class="menu-item pl-0" href="#!">324
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est325
</a>326
</li>327
</ul>328
</div>329
</div>330
</div>331
</li>332
<!-- Multi-level dropdown -->333
<li class="nav-item dropdown multi-level-dropdown">334
<a href="#" id="menu" data-toggle="dropdown" class="nav-link dropdown-toggle text-uppercase">Multi-level</a>335
<ul class="dropdown-menu mt-2 rounded-0 special-color border-0 z-depth-1">336
<li class="dropdown-item dropdown-submenu p-0">337
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me! </a>338
<ul class="dropdown-menu ml-2 rounded-0 special-color border-0 z-depth-1">339
<li class="dropdown-item p-0">340
<a href="#" class="text-white w-100">Hey</a>341
</li>342
<li class="dropdown-item p-0">343
<a href="#" class="text-white w-100">Hi</a>344
</li>345
<li class="dropdown-item p-0">346
<a href="#" class="text-white w-100">Hello</a>347
</li>348
</ul>349
</li>350
<li class="dropdown-item dropdown-submenu p-0">351
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me Too! </a>352
<ul class="dropdown-menu mr-2 rounded-0 special-color border-0 z-depth-1 r-100 l-auto">353
<li class="dropdown-item p-0">354
<a href="#" class="text-white w-100">How</a>355
</li>356
<li class="dropdown-item p-0">357
<a href="#" class="text-white w-100">are</a>358
</li>359
<li class="dropdown-item p-0">360
<a href="#" class="text-white w-100">you?</a>361
</li>362
</ul>363
</li>364
</ul>365
</li>366
367
</ul>368
<!-- Links -->369
370
<!-- Search form -->371
<form class="form-inline">372
<div class="md-form my-0">373
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">374
</div>375
</form>376
377
</div>378
<!-- Collapsible content -->379
380
</nav>381
<!-- Navbar -->xxxxxxxxxx1
.navbar .dropdown.multi-level-dropdown .dropdown-menu .dropdown-submenu {2
position: relative; }3
.navbar .dropdown.multi-level-dropdown .dropdown-menu .dropdown-submenu .dropdown-menu {4
top: 0;5
left: 100%; }6
.navbar .dropdown.multi-level-dropdown .dropdown-menu .dropdown-submenu .dropdown-menu.r-100 {7
right: 100%; }8
.navbar .dropdown.multi-level-dropdown .dropdown-menu .dropdown-submenu .dropdown-menu.l-auto {9
left: auto; }10
11
.navbar .dropdown.multi-level-dropdown .dropdown-menu .dropdown-item {12
width: 100%;13
-webkit-transition: .3s;14
-o-transition: .3s;15
transition: .3s; }16
.navbar .dropdown.multi-level-dropdown .dropdown-menu .dropdown-item:hover {17
background-color: rgba(0, 0, 0, 0.2) !important;18
-webkit-transition: .3s;19
-o-transition: .3s;20
transition: .3s;21
-webkit-box-shadow: none;22
box-shadow: none;23
-webkit-border-radius: 0;24
border-radius: 0; }xxxxxxxxxx1
$('.dropdown-submenu > a').on("click", function(e) {2
var submenu = $(this);3
$('.dropdown-submenu .dropdown-menu').removeClass('show');4
submenu.next('.dropdown-menu').addClass('show');5
e.stopPropagation();6
});7
8
$('.dropdown').on("hidden.bs.dropdown", function() {9
// hide any open menus when parent closes10
$('.dropdown-menu.show').removeClass('show');11
}); Console errors: 0