"large dropdown menu"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 yamm navbar-default nav-extended"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <b>LOGO</b> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">About</a></li> <li class="dropdown" > <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-hover="dropdown" data-animations="fadeIn fadeInLeft fadeInUp fadeInRight">Services <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> <div class="row"> <div class="col-md-3"> <h5>Premium Services</h5> <ul class="nav-menu"> <li><a href="#">24x7 Alerts</a></li> <li><a href="#">Find My Chances</a></li> <li><a href="#">Track My Application</a></li> <li><a href="#">Meet a Councellor</a></li> <li><a href="#">My Addmission Letter</a></li> </ul> </div> <div class="col-md-3"> <h5>NEETell Support</h5> <ul class="nav-menu"> <li><a href="#">Rank Predictor</a></li> <li><a href="#">Best Fit College</a></li> <li><a href="#">College Rankings</a></li> </ul> </div> <div class="col-md-3"> <h5>MCI Bulletin</h5> <ul class="nav-menu"> <li><a href="#">Colleges & Courses</a></li> <li><a href="#">State Medical Council</a></li> <li><a href="#">Internship Hospitals</a></li> <li><a href="#">Tution Fee of Colleges</a></li> <li><a href="#">NEET Notifications</a></li> </ul> </div> <div class="col-md-3"> <h5>Social Services</h5> <ul class="nav-menu"> <li><a href="#">Scholarship & Financial AID</a></li> <li><a href="#">Discover-a-College</a></li> <li><a href="#">Financial Assistance</a></li> <li><a href="#">R.T.I Assistance</a></li> <li><a href="#">Donate your Books</a></li> <li><a href="#">Online Exam</a></li> </ul> </div> </div> </div> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">NEET News & Blog <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Latest News</a></li> <li><a href="#">Blog</a></li> </ul> </li> <li><a href="#">NEETell Academy</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <form class="navbar-form navbar-left"> <div class="form-group search"> <input type="text" class="form-control" placeholder="Search"> <i class="fa fa-search" aria-hidden="true"></i> </div> </form> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
/* Navbar */ .nav-manage { height: 54px; } .navbar-default { border: none; border-radius: 0px; -webkit-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0.3); border-bottom: 1px solid #ebebeb; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } .navbar-brand { max-width: 190px; padding: 10px 15px; } .navbar-default .navbar-nav > li > a { font-size: 14px; font-weight: 600; } .nav-extended { -webkit-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0); box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0); } .dropdown-menu { padding: 15px 0px; } .dropdown-menu > li > a { font-size: 13px; padding: 6px 20px; color: #959595; } .yamm-content ul.nav-menu { list-style-type: none; padding: 0px; margin: 8px 0px 0px; } .yamm-content ul.nav-menu li { padding-bottom: 3px; } .yamm-content ul.nav-menu li a { font-size: 13px; color: #959595; position: relative; left: 0px; } .yamm-content ul.nav-menu li a:hover { left: 3px; color: #fc6b02; } .breadcrumb-outer { background-color: #f7f7f7; border-bottom: 1px solid #ececec; } .breadcrumb-outer .breadcrumb { border: none; background-color: transparent; margin-bottom: 0px; font-size: 11px; padding: 6px 0px; } .breadcrumb > li + li:before { content: "\f105"; font-family: "fontawesome"; } /*! * Yamm!3 - Yet another megamenu for Bootstrap 3 * http://geedmo.github.com/yamm3 * * @geedmo - Licensed under the MIT license */ .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; } @media (min-width: 768px) { ul.nav li:hover > ul.dropdown-menu { display: block; } }

Related: See More


Questions / Comments: