Jquery Dropdown Menu With Settimeout Does Not Work

I know this questions being asked many times already but I can not make my drop down menu work with what I have so far. The problem appears if I set delay for menu to show, without

Solution 1:

I was able to work it out. Demo here http://jsbin.com/owoyon/3/edit

var topNav = $('#navigation'),
    drop = topNav.find('.drop'),
    myTimer;

drop.hover(function () {
    var obj = $(this);
    var subMenu = obj.find('.submenu');
    clearTimeout(myTimer);
    if (subMenu.hasClass('hover')) {
        //do nothing
    } else {
        drop.find('.submenu').removeClass('hover');
        subMenu.addClass('hover');
    }
}, function () {
    myTimer = setTimeout(function () {
        drop.find('.submenu').removeClass('hover');
    }, 300);
});

Solution 2:

I modified your JS code and try this

var topNav = $('#navigation'),
            drop = topNav.find('.drop'),
            myTimer, subMenu;                

$('#navigation .drop').each(function(){
    var obj = $(this);
    obj.hover(function(){

        subMenu = obj.find('.submenu');
        subMenu.addClass('hover');
    },function(){
            myTimer = setTimeout(function(){                
                obj.find('.submenu').removeClass('hover');    
            },300);                                                   
     });
})

DEMO: http://jsfiddle.net/bvhk2/1/