<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>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown col-md-15 col-sm-15 mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Toys </a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Figures & Playsets</li>
<li><a href="#">WWE Wrestling</a></li>
<li><a href="#">Star Wars Rogue One</a></li>
<li><a href="#">Star Wars</a></li>
<li><a href="#">Avengers</a></li>
<li><a href="#">Shop Full Range >></a></li>
<li class="divider"></li>
<li class="dropdown-header">Construction & Cars</li>
<li><a href="#">NERF</a></li>
<li><a href="#">Radio Control Cars</a></li>
<li><a href="#">Robots</a></li>
<li><a href="#">Imaginext</a></li>
<li><a href="#">Shop Full Range >></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Pre-school</li>
<li><a href="#">Paw Patrol</a></li>
<li><a href="#">Thomas the Tank Engine</a></li>
<li><a href="#">Fisher-Price</a></li>
<li><a href="#">Vtech Infant</a></li>
<li><a href="#">Shop Full Range >></a></li>
<li class="divider"></li>
<li class="dropdown-header">Arts, Music & Partyware</li>
<li><a href="#">Crayola</a></li>
<li><a href="#">Dough & Clay</a></li>
<li><a href="#">Kinetic Sand</a></li>
<li><a href="#">Beads</a></li>
<li><a href="#">Shop Full Range >></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Fashion & Dolls</li>
<li><a href="#">Our Generation</a></li>
<li><a href="#">Barbie</a></li>
<li><a href="#">Shopkins</a></li>
<li><a href="#">My Little Pony</a></li>
<li><a href="#">Shop Full Range >></a></li>
<li class="divider"></li>
<li class="dropdown-header">Lego & Bricks</li>
<li><a href="#">LEGO City</a></li>
<li><a href="#">LEGO Star Wars</a></li>
<li><a href="#">LEGO Technic</a></li>
<li><a href="#">LEGO Friends</a></li>
<li><a href="#">Shop Full Range >></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Games, Puzzles & Books</li>
<li><a href="#">Childrens Board Games</a></li>
<li><a href="#">Jigsaws & Puzzles</a></li>
<li><a href="#">Gifts and Other Books</a></li>
<li><a href="#">Family Board Games</a></li>
<li><a href="#">Shop Full Range »</a></li>
<li class="divider"></li>
<a href="#"> <li class="dropdown-header">STEM</li></a>
<a href="#"> <li class="dropdown-header">€2 for €20</li></a>
<a href="#"> <li class="dropdown-header">Back To School</li></a>
</ul>
</li>
</ul>
</li>
<li class="dropdown col-md-15 mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Baby</a>
<ul class="dropdown-menu dropdown-menu-2 mega-dropdown-menu mega-dropdown-menu-2c row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Image Responsive</a></li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Newsletter Form</a></li>
<li><a href="#">Four columns</a></li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Image Responsive</a></li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Newsletter Form</a></li>
<li><a href="#">Four columns</a></li>
</ul>
</li>
</li>
</ul>
</li>
<li class="dropdown col-md-15 mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Outdoor </a>
<ul class="dropdown-menu dropdown-menu-3 mega-dropdown-menu mega-dropdown-menu-2c row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Image Responsive</a></li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Newsletter Form</a></li>
<li><a href="#">Four columns</a></li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Image Responsive</a></li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Newsletter Form</a></li>
<li><a href="#">Four columns</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown col-md-15 mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Gaming</a>
<ul class="dropdown-menu dropdown-menu-4 mega-dropdown-menu mega-dropdown-menu-2c row">
<li class="col-sm-6">
<ul>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Image Responsive</a></li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Newsletter Form</a></li>
<li><a href="#">Four columns</a></li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Image Responsive</a></li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Newsletter Form</a></li>
<li><a href="#">Four columns</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown col-md-15 mega-dropdown">
<a href="#" class="" >Gift Finder </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';
background:#f0f0f0;
}
a {
color: #fff;
}
a:hover, a:focus {
color: #fff;
text-decoration: underline;
}
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
.navbar .navbar-collapse {
background:#1F96F4;
}
.navbar-nav>li>.dropdown-menu {
margin-top:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
}
.navbar-default .navbar-nav>li>a {
width:200px;
font-weight:bold;
font-size: 16px;
}
.mega-dropdown {
position: static !important;
width:100%;
}
.mega-active:after {
background: #0087F2;
bottom: -8px;
content: ' ';
display: block;
height: 15px;
left: calc(50% - 5px);
position: absolute;
width: 15px;
z-index: 99;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 50% 50%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
/*.mega-dropdown-menu:before {*/
/* content: "";*/
/* border-bottom: 15px solid #0087F2;*/
/* 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: 0px solid #ccc;*/
/* border-right: 19px solid transparent;*/
/* border-left: 19px solid transparent;*/
/* position: absolute;*/
/* top: 0px;*/
/* 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: #fff;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: underline;
color: #fff;
background-color: ;
}
.mega-dropdown-menu .dropdown-header {
color: #fff;
font-size: 14px;
font-weight:bold;
font-family: 'UniformRnd-bold', sans-serif;
}
.mega-dropdown-menu form {
margin:3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
text-decoration: underline;
color: #fff;
background:#1F96F4;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
text-decoration: underline;
color: #fff;
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.dropdown-menu{
background-color: #0087F2;
border: 0px solid rgba(0,0,0,.15);
font-size: 12px;
}
.dropdown-menu-2{
left: 9%;
}
.dropdown-menu-3{
left: 28%;
}
.dropdown-menu-4{
left: 45%;
}
.mega-dropdown-menu-2c {
width: 45%;
}
.head { width:50%;}
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
$(document).ready(function(){
$(".dropdown").hover(
function() {
$(this).toggleClass('open');
},
function() {
$(this).toggleClass('open');
}
);
$('.dropdown-toggle').mouseover(function(){
if ($(this).hasClass('mega-active')) return;
$('.mega-active').removeClass('mega-active');
$(this).addClass('mega-active');
});
$('.nav, .mega-dropdown-menu').mouseout(function(){
if ( ($(".mega-active").length > 0) && ($(".open").length === 0) )
{
$('.mega-active').removeClass('mega-active');
}
});
});
