bootstrap3 navbar
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).slideToggle('fast');
}, function() {
$(this).find('.dropdown-menu').stop(true, true).slideToggle('fast');
});
});
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="/bonboard/home"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li id="home" ><a href="/bonboard/home">Home</a></li>
<li id="about" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"></i><spring:message code="welcome.chisiamo" text="default text" /><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/bonboard/about/about_us">About us</a></li>
<li><a href="/bonboard/about/advisory">Advisory board</a></li>
<li><a href="/bonboard/about/partners">Partners</a></li>
<li><a href="/bonboard/about/staff">Staff</a></li>
</ul>
</li>
<li id="servizi" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"></i><spring:message code="welcome.servizi" text="default text" /><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/bonboard/servizi/i_nostri_servizi_per_voi"><spring:message code="welcome.serviziPerVoi" text="default text" /></a></li>
<li><a href="/bonboard/servizi/offerta_modulare"><spring:message code="welcome.offertaModulare" text="default text" /></a></li>
<li><a href="/bonboard/servizi/personalizzazione_dei_servizi"><spring:message code="welcome.personalizzazioneServizi" text="default text" /></a></li>
</ul>
</li>
<li id="offerte" class=""><a href="#"><spring:message code="welcome.offerte" text="default text" /></a></li>
<li id="press" class=""><a href="#">Press Area</a></li>
<li id="blog" class=""><a href="/bonboard/blog">Blog</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"></i><spring:message code="welcome.lingua" text="default text" /><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="it" class="pointer">Italiano</a></li>
<li><a id="en" class="pointer">English</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input id="user" type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input id="pass" type="password" class="form-control" placeholder="Password">
</div>
<button id="logButt" type="button" class="btn btn-default">Sign in</button>
<a href="/bonboard/register"><spring:message code="welcome.registrati" text="default text" /></a>
</form>
</div>
</div>
.navbar-default {
background-color: #00AA8F !important;
border: none !important;
}
.navbar-default .navbar-brand {
color: #00AA8F !important ;
}
form a{
color: white;
}
form a:hover{
color: #006266;
text-decoration: none;
}
.navbar-default .navbar-nav > li > a:hover {
}
.navbar-default .navbar-nav > li > a {
color: white !important;
text-shadow:none !important;
-webkit-transition:background .2s ease;
-moz-transition:background .2s ease;
-o-transition:background .2s ease;
transition:background .2s ease;
}
.navbar-default .navbar-nav > li > a:hover {
color: white !important;
background: #006266 !important;
-webkit-transition:background .2s ease;
-moz-transition:background .2s ease;
-o-transition:background .2s ease;
transition:background .2s ease;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: white !important;
background-color: #00AA8F !important;
background: #006266 !important;
}
.dropdown-toggle {
background: #00AA8F !important;
}
.dropdown-menu{
background:#00AA8F !important;
border-radius:0px !important;
box-shadow:none !important;
padding:0px 0px;
margin:0px;
border: none !important;
}
.dropdown-menu a{
background:#00AA8F !important;
padding:9px 10px;
color:#fff !important;
text-shadow:none !important;
-webkit-transition:background .2s ease;
-moz-transition:background .2s ease;
-o-transition:background .2s ease;
transition:background .2s ease;
}
.dropdown-menu a:hover,.dropdown-menu a:focus{
filter:none !important;
background:#006266 !important;
-webkit-transition:background .2s ease;
-moz-transition:background .2s ease;
-o-transition:background .2s ease;
transition:background .2s ease;
}
.dropdown-menu::after, .dropdown-menu::before{
border:none !important;
}