Question

Im trying to add a delay that works on my dropdown menu if the person misstakly
moves mouse outside the menu. I have tried many solutions found on here but non of them
seam to work.

Edit:
here is the link to jsfiddle for a complite example

Edit: 5

$(function () {
            var slideDownTime = 400;
            var firstRun = true;

            var $menu = $('#menu'),
            $submenus = $menu.find('ul'),
            $items = $menu.find('li'),
            hide = function ($el, $instantHide) {
                if (!firstRun) {
                    if (!$instantHide) {
                        // force the menu item to show.
                        $el.css({ visibility: "visible", display: "block" });

                        var hideMenuId = setTimeout(function () {
                            $el.hide().css('visibility', 'hidden');
                        }, 5000);

                        $el.data('hideMenuId', hideMenuId);
                    } else {
                        $el.hide().css('visibility', 'hidden');
                    }
                } else {
                    $el.hide().css('visibility', 'hidden');
                }
            },
            show = function ($el) {
                clearTimeout($el.data('hideMenuId'));
                $el.css('visibility', 'visible').stop(1, 1).slideDown(slideDownTime);

                hide($el.parent().siblings().find("ul"), true); // <-- this line hides the other submenus if hovered.

                var singleLevel = $el.parent().find("ul > li:not(:has(ul)) > a");
                singleLevel.hover(function () {
                    hide($(this).closest("ul").children('li').not(this).find("ul"), true);
                }, function () {
                });

                firstRun = false;
            };

            $menu.focusout(hide($submenus));
            $items.hover(function () {
                show($(this).children('ul'));
            }, function () {
                hide($(this).children('ul'), false);
            });

             // find the root elemement level with no children.
             $menu.find("> li a").not("ul li ul a").not("li:has(ul) > a").hover(function () {
                  //hide the unwantend menu items.
                  hide($(this).closest("ul").children('li').not(this).find("ul"), true);
            }, function () {
            });

 });

Ok this is what i ended up with.
but can this not be made with less code ?

Edit: 6
The jsfiddle link is now updated to the latest verision.

Answer 1

Try using focusout() with a delay(). Also, I don’t think you need all that if else logic. Every submenu is an <ul> children of $('#menu') and at the same time, children of a <li>, so you can easily create a function to show or hide a menu which accepts a jQuery object as parameter. Without your html code I can’t say for sure, but something like this should work. Adapt to your needs.

var $menu = $('#menu'), // Assuming this is a `<ul>`
    $submenus = $menu.find('ul'),
    $items = $menu.find('li'),
    hide = function($el){ 
        $el.delay(500).hide().css('visibility', 'hidden'); 
    },
    show = function($el){ 
        $el.css('visibility', 'visible').stop(1, 1).slideDown(); 
    };

$menu.focusout(hide($submenus));
$items.hover(function(){
    show($(this).children('ul'));
}, function(){
    hide($(this).children('ul'));
});

Also this:

element.css('visibility') != "visible" && element.css('display') != "block"

is the same as:

element.is(':visible')