It's a little bit of a dirty hack but it gets the job done.
jQuery Code:
jQuery('ul.nav li.dropdown').hover(function (){
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
jQuery('a').hover(function() {
var height = jQuery(this).offset();
jQuery(this).parent().find('.sub-menu').css('top', height.top - +106);
});
}, function (){
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
jQuery('.btn-navbar').on('click',function(){
jQuery('nav#main_menu > .nav-collapse > ul.nav-pills').slideDown();
});
jsFiddle: http://jsfiddle.net/zfmuf/9/
It gets the offset of the height in the div from the a, then adds it to the sub-menu class while removing the parents offset. Its quite a dirty little hack but it works.