"Bootstrap dropdown sub menu"
Bootstrap 3.2.0 Snippet by betdream

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header class="container"> <div class="navbar navbar-inner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="closepage" menuid="0" class="brand" href="#" followlink="true"> LOGO</a> </div> <div class="collapse navbar-collapse pull-right" id="main-menu"> <ul class="nav"> <li class="fadeInDown animated d1 "><a href="#Anasayfa" class="active" id="home" menuid="0" followlink="true" >ANA SAYFA</a></li> <li class="fadeInDown animated d2"><a href="#Hakkimizda" menuid="1" followlink="true">HAKKIMIZDA</a></li> <li class="dropdown fadeInDown animated d3"> <a href="#" class="trigger right-caret">HİZMETLERİMİZ</a> <ul class="firstlevel dropdown-menu sub-menu" style="display: none;"> <li class="twolevel"> <a class="trigger right-caret">KURUMSAL FİNANSMAN</a> <ul class="thirdlevel dropdown-menu sub-menu" style="margin-left: -563px; display: none;"> <li><a href="#" menuid="220" followlink="true">ŞİRKET BİRLEŞME & SATIN ALMA</a></li> <li><a href="#" menuid="221" followlink="true">HALKA ARZ</a></li> <li><a href="#" menuid="222" followlink="true">TAHVİL/BONO İHRACI</a></li> <li><a href="#" menuid="223" followlink="true">DANIŞMANLIK</a></li> </ul> </li> <li><a href="#" menuid="224" followlink="true">ARAŞTIRMA</a></li> <li class="twolevel"> <a class="trigger right-caret">ARACILIK FAALİYETLERİ</a> <ul class="thirdlevel dropdown-menu sub-menu"> <li><a href="#Forex" menuid="311" followlink="true">FOREX</a></li> <li><a href="#CFD" menuid="312" followlink="true">CFD</a></li> <li><a href="#Hisse" menuid="3" followlink="true">HİSSE/VİOP</a></li> <li><a href="#Turev" menuid="4" followlink="true">TÜREV</a></li> <li><a href="#UluslararasiPiyasalar" menuid="5" followlink="true">ULUSLARARASI PİYASALAR</a></li> </ul> </li> <li><a href="#Varlik-Yonetimi" menuid="10" followlink="true">VARLIK YÖNETİMİ</a></li> </ul> </li> <li class="fadeInDown animated d3"><a href="#Iletisim" menuid="11" followlink="true">İLETİŞİM</a></li> </ul> </div> <!--/.nav-collapse --> </div> </header>
body{background:#686464} .brand{font-size:34px; color:#aaa3a3 !important; padding-left:15px;} /* Navbar */ .navbar-inner { margin-top: -1px; background: #fff; box-shadow: none; border: none; height: 75px; } .navbar-inner .brand { margin-top: 14px; display: block; } .navbar .nav > li { float: left; height: 75px !important; } .navbar .nav > li > a:hover, .navbar .nav > li > a:active, .navbar .nav > li > a:focus, .navbar .nav > li > a.active, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .active-menu { background: #a1a1a1 !important; color: #fff !important; } .navbar .nav > li > a { color: #aaa3a3 !important; float: none; height: 100%; line-height: 70px; padding: 0 15px; text-decoration: none; text-shadow: none; letter-spacing: 2.322px; } .dropdown-menu > li { position: relative; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; cursor: pointer; } #main-menu { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; } .dropdown-menu { background-clip: padding-box; background: #fff; border: none; border-radius: 0; box-shadow: none; float: left; left: 0; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: 100%; z-index: 1000; } .dropdown .sub-menu li > a { padding-top: 15px; padding-bottom: 15px; text-decoration: none; text-shadow: none; letter-spacing: 2.322px; color: #aaa3a3 !important; border-right: 6px solid #fff; border-left: 1px solid #efefef; } .dropdown .sub-menu { margin-top: -1px; } .dropdown .sub-menu li { border-top: 1px solid #efefef; } .dropdown .sub-menu li:nth-child(1) { border-top: 1px solid #efefef; } .dropdown .sub-menu li > a:hover { border-right-color: #A1A1A1; } .secondlevel { left: 100%; } .thirdlevel { left: 100% !important; top: 0px !important; } .forthlevel { left: 100% !important; top: 0px !important; } .navbar-toggle .icon-bar { background-color: #888; } .navbar .nav > li > .dropdown-menu::before { position: absolute; top: -7px; left: 70px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #CCC; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .navbar .nav > li > .dropdown-menu::after { position: absolute; top: -6px; left: 73px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid white; border-left: 6px solid transparent; content: ''; } /*mobile resize*/ @media screen and (max-width:768px) { .navbar-nav { margin-top: 15px; } .navbar .nav > li { width: 100%!important; height: 55px!important; border-top: 1px solid #ddd; background: #fff!important; } #main-menu { width: 100%; padding-left: 0px!important; margin-right: -7px!important; } } @media screen and (max-width:991px) { .navbar .nav > li > a { padding: 0 10px!important; } .navbar .nav > li > .dropdown-menu { display: none!important; } }
$(function () { $("#main-menu").on("mouseenter", ".dropdown", function () { $(this).find(".firstlevel").parent().addClass("active"); $(this).find(".firstlevel").show(); $(this).on("mouseleave", function () { $(this).find(".firstlevel").hide(); $(this).find(".firstlevel").parent().removeClass("active"); }); }); $("#main-menu").on("mouseenter", ".twolevel", function () { var ww = $(window).width(); var $menuItem = $(this).find(".thirdlevel"); var $firstLevel = $(".firstlevel"); var mw = $menuItem.width() + $firstLevel.offset().left + $firstLevel.width(); var marginLeft = 0 - ($menuItem.width() + $firstLevel.width()); if (ww < mw) { $menuItem.css("margin-left", marginLeft); } $menuItem.css("display", "block"); $(this).on("mouseleave", function () { $(this).find(".thirdlevel").css("display", "none"); }); }); }); $(function () { $(".dropdown-menu > li > a.trigger").on("click", function (e) { var current = $(this).next(); var grandparent = $(this).parent().parent(); if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret')) $(this).toggleClass('right-caret left-caret'); grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret'); grandparent.find(".sub-menu:visible").not(current).hide(); current.toggle(); e.stopPropagation(); }); $(".dropdown-menu > li > a:not(.trigger)").on("click", function () { var root = $(this).closest('.dropdown'); root.find('.left-caret').toggleClass('right-caret left-caret'); root.find('.sub-menu:visible').hide(); }); });

Related: See More


Questions / Comments: