<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle">Аксессуары<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"><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"><a href="#">Обложки</a></li>
<li><a href="#">Обложки для зачеток и студенческих</a></li>
<li><a href="#">Обложки для документов</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Наклейки</a></li>
<li><a href="#">Наклейки на телефон</a></li>
<li><a href="#">Наклейки на машину</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Чехлы</a></li>
<li><a href="#">Именные чехлы</a></li>
<li><a href="#">Универсальные чехлы</a></li>
<li><a href="#">Чехлы для IPhone</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Гаджеты</a></li>
<li class="divider"></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle">Декор<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"><a href="#">Вазы</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Свечи и подсвечники</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Фоторамки</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Светильники</a></li>
</ul>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Настенный декор</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle">Необычные подарки<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"><a href="#">Игрушки-антистресс</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Настольные игры</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Большие мишки</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Подарки-приколы</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" >HandMade Exclusive<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 1</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"><a href="#">Авторские игрушки</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Авторские картины</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Мыло ручной работы</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Подушки ручной работы</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Портреты от художника</a></li>
<li class="divider"></li>
<li class="dropdown-header"><a href="#">Букеты</a></li>
<li><a href="#">Букеты из игрушек</a></li>
<li><a href="#">Букеты из конфет</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><a href="#">Сладости</a></li>
<li><a href="#">Торты</a></li>
<li><a href="#">Пирожные и капкейки</a></li>
<li><a href="#">Шоколад </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
</div>
<script>
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass("open");
});
$('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target) && $('li.dropdown.mega-dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
$('li.dropdown.mega-dropdown').removeClass('open');
}
});
</script>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@font-face {
font-family: 'ctc_splash_roundedbold';
src: url(http://hipster.athemes.ru/fonts/fonts/fgauvcv2.eot);
src: url(http://hipster.athemes.ru/fonts/fonts/fgauvcv2.eot?#iefix) format('embedded-opentype'),
url(http://hipster.athemes.ru/fonts/fonts/fgauvcv2.woff2) format('woff2'),
url(http://hipster.athemes.ru/fonts/fonts/fgauvcv2.woff) format('woff'),
url(http://hipster.athemes.ru/fonts/fonts/fgauvcv2.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: "ctc_splash_roundedbold";
background:#f0f0f0;
}
.navbar-nav>li>.dropdown-menu {
/*margin-top:20px;*/
border-top-left-radius:4px;
border-top-right-radius:4px;
background: #F1F2F2 url(http://cutecute.ru/images/design/pattern_cute_grey.png) repeat scroll 0% 0%;
}
.navbar-default .navbar-nav>li>a {
width:240px;
font-weight:bold;
text-transform: uppercase;
cursor: pointer;
display: block;
font-size: 15px;
color: #252525;
position: relative;
text-transform: uppercase;
z-index: 2;
transition: all 0.4s ease 0s;
font-weight: 600;
}
.mega-dropdown {
position: static !important;
/*width:100%;*/
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.open .dropdown-toggle:after {
border-bottom: 15px solid #fff;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
content: "";
left: 163px;
position: absolute;
bottom: -21px;
z-index: 1500;
}
.open .dropdown-toggle span:after {
border-bottom: 17px solid #ccc;
border-left: 19px solid transparent;
border-right: 19px solid transparent;
content: "";
left: -10px;
position: absolute;
bottom: -41px;
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: #000;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #EE5249;
background-color: #FFC95D;
transition: all 0.3s ease 0s;
}
.mega-dropdown-menu .dropdown-header {
color: #EE5249;
font-size: 18px;
font-weight:bold;
}
.mega-dropdown-menu form {
margin:3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
