Question

look at this please http://jsfiddle.net/xhpqa/4/
the sub_menu div keeps hiding if mouseover it because it has no height (to expand with content if i specify height or min-height and max-height it doesn’t expand)

Answer 1

add this line in your code it will serve your purpose. please check i have added some css styles at proper locations:

EDIT:

   $(document).ready(function() {
// getting links from db and show sub_menu div //
    $(".menu_item").mouseover(function(){
        $(this).children().slideDown(100,function(){});
        $(this).children(".sub_menu").css({'display':'block'});
    });

// hiding sub_menu div //
    $(".menu_item").mouseout(function(){
        $(this).children(".sub_menu").slideUp(100);
        $(this).children(".sub_menu").css({'height':'auto', 'display':'none' });
    });

// keeping sub_menu div visible on mouse over //
    $(".sub_menu").mouseover(function() {
        $(this).stop();
        $(this).css({'display':'block'});
    });

        $(".sub_menu").mouseout(function() {
        $(this).parent().css("background-image","url(images/menu_bg.gif)");
        $(this).slideUp(10);
            $(this).css({'height':'auto', 'display':'none'});

    });

// document ready end
});

since you are using slideUp and slideDown function of jQuery.

when you mouse over/ out quickly the height is not properly set to your sub-menu div.

slideUp happens when your element is display:block (i.e visible) and its height starts from actual height til it becomes zero (0).

slideDown happens when the height of the element is started to increase from zero (0) to it actual height and it is display:none (i.e hidden).