From your javascript/jQuery for the drop1 part
$(".drop1")
.mouseenter(function(){
$(".drop11").slideDown();
})
.mouseleave(function(){
$(".drop11").slideUp();
})
;
and looking at the markup
The css class drop1 and drop11 are being used for both "Training Programmes" and "Contact Us"
On the browser when the mouseenter/mouseleave are occurring for drop1, all drop11 will do slideDown/slideUp respectively.
Do something like this to find the associated child dropdown-menu for the mouseenter/mouseleave events.
$(".dropdown")
.mouseenter(function() {
$(this).find('> .dropdown-menu').slideDown();
})
.mouseleave(function() {
$(this).find('> .dropdown-menu').slideUp();
})
;
Here is a jsfiddle with your markup added and javascript as above example:
JSFiddle[
^]
Hopefully it should point you in the correct direction.