How can I show a div only when hovering a menu item or the div?

Question

I have items contained in an unordered list. I have hidden divs (using display:none;) outside of this list. When you hover over a list item, I would like the div to appear

Answer 1

You can wrap the widgets in a div and attach a mouseleave event to it. This solution also uses the rel attibute to store the widget id: DEMO

HTML

    

        

            
First Link
            
Second Link
            
Third Link
            
Fourth Link
        
    


    

                
Sub Title 1
              
                
Lorem Ipsum
                Read More
     

      ...

JS

$('#main-menu a').mouseover(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
   $currentWidget.show().siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
    $('.widget-container').hide();
});