Bootstrap Dropdown menu troubleshoot - html

Question

I am building a site here:
Website Link
The drop-down navbar menu is working fine except the fact that when there is a mouse-over on the items to the right of the navbar, the first drop-down menu activates. (i.e. Click on Administration and both its drop-down menu and the drop-down menu under "who are we" also drops down!)
Any further suggestions, please?
The code is as follows:
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
-->
Toggle navigation
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li>
_Vet Clinics
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
Any help in seeing where the problem is would be gratefully received as my eyes are going after hours of tring nto find the problem.
Many Thanks
Update:
I have applied the solution proposed by #Spade but the situation remains.
Using [link]http://apaaportugal.doidosou.eu/useful_links.php as a test page (no carousel) onmouseover on any dropdown menu item also activates the first drop-down under item "_who are we".
Javascript code on the page is:
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Sub-Menu JavaScript -->
<script src="js/sub_menu.js"></script>
<!-- header script -->
<script>
var headerHeight = 200;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > headerHeight) {
$('#myNav').removeClass('navbar-top');
$('#myNav').addClass('navbar-fixed-top');
} else {
$('#myNav').removeClass('navbar-fixed-top');
$('#myNav').addClass('navbar-top');
}
});
</script>
<!-- Bootstrap Dropdown Hover JS -->
<script src="js/bootstrap-dropdownhover.min.js"></script>
<script>
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
</script>
Navbar Html code as follows:
<!-- Header Content -->
<div class="container">
<div class="row">
<div class="col-lg-1">
<img src="/images/APPA_logo_R_80.png"><a class="navbar-brand" href="#"></a>
</div>
<div class="col-lg-11">
<div>
<h1 class="h_header">APAA - Association for the Protection of Animals in the Algarve</h1>
<h3 class="h_header">Associação de Protecção Animal do Algarve</h3>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
<!-- <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 1

Two things need to be changed:
1) Replace "Script to Activate the Carousel" with the following:
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
2) Replace the code you shared for Navigation with the following:
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1" data-toggle="dropdown">
<ul class="nav navbar-nav">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Also Attaching the result at my side: