I want to delay the dropdown hide and animation for the same time
<p>Here is the code, when hovering on the <code>li</code> items the tabs animate and grow to <code>270px</code> simultaneously opening a dropdown <code>div</code> of same width containing input fields, but when I move the mouse out of the <code>dropdown</code> div or try to select something from option lists the dropdown closes,I want some delay or other solution for this issue </p>

<pre><code>$(function() {
            /**
             * the menu
             */
            var $menu = $('#ldd_menu');

            /**
             * for each list element,
             * we show the submenu when hovering and
             * expand the span element (title) to 270px
             */
            $menu.children('li').each(function(){
                var $this = $(this);
                var $span = $this.children('span');
                $span.data('width',$span.width());

                $this.bind('mouseenter',function(){
                    $menu.find('.ldd_submenu').stop(true,true).hide();
                    $span.stop().animate({'width':'270px'},300,function(){
                        $this.find('.ldd_submenu').slideDown(300);
                    });
                }).bind('mouseleave',function(){
                    $this.find('.ldd_submenu').stop(true,true).hide();

                    $span.stop().animate({'width':$span.data('width')+'px'},300);
                });
            });
        });
</code></pre>
