<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<div class="row">
<nav class="navgen navgen-default" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navgen-collapse" id="bs-example-navbar-collapse-1">
<ul class="nava navgen-nav">
<li class="hoverdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">OUR PET FOOD <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">OUR PET FOOD 1</a></li>
<li><a href="#">OUR PET FOOD 2</a></li>
<li><a href="#">OUR PET FOOD 3</a></li>
</ul>
</li>
<li class="hoverdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">OUR PET FOOD <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">OUR PET FOOD 1</a></li>
<li><a href="#">OUR PET FOOD 2</a></li>
<li><a href="#">OUR PET FOOD 3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
.navgen-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navgen {
border-radius: 4px;
}
.navgen {
position: relative;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navgen-default .navgen-collapse, .navgen-default .navgen-form {
border-color: rgb(231, 231, 231);
}
.navgen-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
.navgen-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navgen-collapse {
max-height: 340px;
overflow-x: visible;
padding-right: 15px;
padding-left: 15px;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
-webkit-overflow-scrolling: touch;
}
.collapse {
display: none;
}
.navgen-nav {
float: left;
margin: 0;
}
.navgen-nav {
margin: 0px -15px;
}
.nava {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
.navgen-nav>li {
float: left;
}
.nava>li {
position: relative;
display: block;
}
.dropdown {
position: relative;
}
.navgen-default .navgen-nav>li>a {
color: #777;
}
.navgen-default .navgen-nav>li>a:hover, .navgen-default .navgen-nav>li>a:focus {
color: #333;
}
.navgen-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navgen-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.nava>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
.caret {
display: none!important;
}
.navgen-nav>li>.dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 100%!important;
padding: 0 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 0;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
.dropdown-menu > li > a {
display: block;
padding: 10px 0px 10px 0;
clear: both;
font-weight: 400;
line-height: 1.42857;
color: rgb(51, 51, 51);
white-space: nowrap;
text-align: center;
}
.nava>li>a:hover, .nava>li>a:focus {
text-decoration: none;
background-color: #eee;
}
.dropdown-toggle:focus {
outline: 0;
}
$(document).ready(function() {
$(".hoverdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});
});
