<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg navbar-light bg-light yamm"> <a class="navbar-brand" href="#">Mega Dropdown</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto "> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown" id="myDropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Categories </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="row m-0"> <nav> <div class="nav nav-pills flex-column" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Categorie 1</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Categorie 2</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Categorie 3</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> Lorem Ipsum, avec plein de textes quelconque </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">.2. or</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">.3. nothing</div> </div> </div> <!-- /.container --> </li> <li class="nav-item dropdown" id="myDropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Grid Demo </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <div class="grid-demo"> <div class="col-sm-12">.col-sm-12</div> </div> <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div> <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div> <div class="row"> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-2">.col-sm-2</div> </div> <div class="row"> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> </div> </div> <!-- /.container --> </li> </ul> </div> </nav>

.yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown { position: static; } .yamm .container { position: relative; } .yamm .dropdown-menu { left: auto; } .yamm .yamm-content { padding: 20px 30px; } .yamm .dropdown.yamm-fw .dropdown-menu { left: 0; right: 0; } /* Grid demo styles */ .yamm .dropdown .grid-demo [class*="col-sm-"] { margin-top: 5px; margin-bottom: 5px; font-size: 1em; text-align: center; line-height: 2; background-color: #e5e1ea; border: 1px solid #d1d1d1; }

$(document).on('click', '.yamm .dropdown-menu', function(e) { e.stopPropagation() }) $(document).on('mouseenter', '.yamm .dropdown-menu [data-toggle="tab"]', function () { $(this).tab('show'); });