<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <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="#">MegaMenu</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> </div><!-- End Carousel Inner --> </div><!-- /.carousel --> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Effortless English</li> <li id="wsite-nav-homepage" class="wsite-menu-subitem-wrap"><a href="http://www.effortlessenglishclub.vn" class="wsite-menu-subitem"><span class="wsite-menu-title">Trang nhất</span></a> </li> <li id="wsite-nav-510860353321214464" class="wsite-menu-subitem-wrap"><a href="/effortless-english-lagrave-gigrave.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Effortless English là gì? </span></a> </li> <li id="wsite-nav-281399331595848379" class="wsite-menu-subitem-wrap"><a href="/ph432417ng-phaacutep.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Phương pháp </span></a> </li> <li id="wsite-nav-722088561863594977" class="wsite-menu-subitem-wrap"><a href="/272i7875m-n7893i-b7853t.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Điểm nổi bật </span></a> </li> <li id="wsite-nav-979261415850581789" class="wsite-menu-subitem-wrap"><a href="/7-rules.html" class="wsite-menu-subitem"><span class="wsite-menu-title">7 nguyên tắc </span></a> </li> <li id="wsite-nav-194293512349181369" class="wsite-menu-subitem-wrap"><a href="/8-273i7873u-thuacute-v7883.html" class="wsite-menu-subitem"><span class="wsite-menu-title">8 điều thú vị </span></a> </li> <li id="wsite-nav-597036174798321268" class="wsite-menu-subitem-wrap"><a href="/study-guide.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Hướng dẫn học </span></a> </li> <li id="wsite-nav-667735499126300431" class="wsite-menu-subitem-wrap"><a href="http://www.effortlessenglishclub.vn/demo.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Bài học thử</span></a> </li> <li class="divider"></li> <li class="dropdown-header">Tops</li> <li><a href="#">Good Typography</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Tác giả</li> <li id="wsite-nav-769763266358603676" class="wsite-menu-subitem-wrap"><a href="/story-about-aj-hoge.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Hành trình đi tìm Effortless English</span></a> </li> <li id="wsite-nav-720447280451196106" class="wsite-menu-subitem-wrap wsite-nav-current"><a href="/key-to-excellent-english-speaking.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Key to Excellent English Speaking </span></a> </li> <li id="wsite-nav-284495262262225412" class="wsite-menu-subitem-wrap"><a href="/learn-english-like-children.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Learn English Like Children </span></a> </li> <li id="wsite-nav-782713207702359664" class="wsite-menu-subitem-wrap"><a href="/effortless-english-7-rules-vietsub.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Effortless English 7 Rules (vietsub) </span></a> </li> <li id="wsite-nav-313209887388826319" class="wsite-menu-subitem-wrap"><a href="/action-vocabulary.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Action Vocabulary </span></a> </li> <li id="wsite-nav-509270622619342409" class="wsite-menu-subitem-wrap"><a href="/effortless-english-seminar.html" class="wsite-menu-subitem"><span class="wsite-menu-title">Effortless English Seminar </span></a> </li> <li id="wsite-nav-732205172124435346" class="wsite-menu-subitem-wrap" style="display:none;"><a href="/" class="wsite-menu-subitem"><span class="wsite-menu-title">Effortless English & Tony Robbins</span></a> </li> <li class="divider"></li> <li class="dropdown-header">Pants</li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> <li><a href="#">Calls to action</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Accessories</li> <li><a href="#">Default Navbar</a></li> <li><a href="#">Lovely Fonts</a></li> <li><a href="#">Responsive Dropdown </a></li> <li class="divider"></li> <li class="dropdown-header">Newsletter</li> <form class="form" role="form"> <div class="form-group"> <label class="sr-only" for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </form> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background:#f0f0f0; } .navbar-nav>li>.dropdown-menu { margin-top:20px; border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li.mega-dropdown>a { width:200px; font-weight:bold; } .mega-dropdown { position: static !important; width:auto; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight:bold; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; }