<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-inverse"> <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> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Стоматология <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Акции на стоматологию</li> <div id="menCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://ddclinic.com.ua/static/default/uploads/images/content/discounts/br16-09-2015.jpg" class="img-responsive" alt="product 1"></a> <h4><small>Отбеливание зубов стоимость:</small></h4> <button class="btn btn-primary" type="button">249,99 ₴</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-earphone"></span> Заказать звонок</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://ddclinic.com.ua/static/default/uploads/images/content/lip-augmentation/lips-17-09-2015.jpg" class="img-responsive" alt="product 2"></a> <h4><small>Отбеливание зубов экономия:</small></h4> <button class="btn btn-primary" type="button">299,99 ₴</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-earphonet"></span> Заказать звонок</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://ddclinic.com.ua/static/default/uploads/images/content/restavracia/eure-clean-face-17-09-2015.jpg" class="img-responsive" alt="product 3"></a> <h4><small>Отбеливание зубов экономия:</small></h4> <button class="btn btn-primary" type="button">149,99 ₴</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-earphone"></span>Заказать звонок</button> </div><!-- End Item --> </div><!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#menCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#menCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div><!-- /.carousel --> <li class="divider"></li> <li><a href="#">Смотреть все акции <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Терапевтическая стоматология</li> <li><a href="#">Лечение зубов</a></li> <li><a href="#">Чистка зубов</a></li> <li><a href="#">Чистка зубов</a></li> <li><a href="#">Чистка зубов</a></li> <li class="divider"></li> <li class="dropdown-header">Ортодонтия</li> <li><a href="#">Лингвальные брекеты</a></li> <li><a href="#">Рейтейнеры</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Протезирование зубов</li> <li><a href="#">Коронки</a></li> <li><a href="#">Виниры и люминиры</a></li> <li><a href="#">Коронки</a></li> <li><a href="#">Виниры и люминиры</a></li> <li class="dropdown-header">Хирургия</li> <li><a href="#">Лингвальные брекеты</a></li> <li><a href="#">Рейтейнеры</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> <li class="dropdown-header">Имплантация</li> <li class="dropdown-header">Имплантация2</li> <li class="dropdown-header">Имплантация3</li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Косметология <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</a></li> <li class="divider"></li> <li class="dropdown-header">Fonts</li> <li><a href="#">Glyphicon</a></li> <li><a href="#">Google Fonts</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> <li class="dropdown-header">Имплантация</li> <li class="dropdown-header">Имплантация2</li> <li class="dropdown-header">Имплантация3</li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Women Collection</li> <div id="womenCollection" 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/ff3546/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 --> <!-- Controls --> <a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#womenCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </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> </ul> </li> <li><a href="#">Акции</a></li> <li><a href="#">Цены</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Наши работы</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Контакты</a></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';*/ font-family: 'Arial'; } /* //////////////////////////// */ .navbar { position: relative; min-height: 30px; margin-bottom: 20px; border: 1px solid transparent; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; } .navbar-inverse { background-color: #003896; border-color: #003896; } .navbar-nav>li>a { padding-top: 10px!important; padding-bottom: 10px!important; line-height: 20px; } .navbar-inverse .navbar-nav>.open>a { background: linear-gradient(to top, #FF9E01, #F2F500); color: #003896; } .navbar-inverse .navbar-nav>li>a { color: #FFFFFF; font-size: 14px; text-transform: uppercase; } .navbar-inverse .navbar-nav>li>a:hover { color: #003896; } .navbar-inverse .navbar-nav>li:hover { background: linear-gradient(to top, #FF9E01, #F2F500); } /* //////////////////////////// */ .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 15px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .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; color: #222; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 14px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .carousel-control { width: 30px; height: 30px; top: -35px; } .left.carousel-control { right: 30px; left: inherit; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd; }

$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); $(this).toggleClass('open'); } ); });