$(document).ready(function() {
 
$("li").hover(function() {
 
var itemwidth = $(this).width(); /* Getting the LI width */
$(this).prepend("<div class='hover'></div>"); /* Inserting a blank div into within li above the <a> tag*/
$(this).find("div").fadeIn('300').css({ 'width' : itemwidth}); /* Using the itemwidth for the div to display properly*/
$(this).find("ul").fadeIn('300').slideDown('300').css("display", "block");
 
} , function() {
$(this).find("div").slideUp('300').fadeOut('300');/* sliding up and fading out the hover div */
$(this).find("div").remove();/* removing the <div> code from html at every mouseout event*/
$(this).find("ul").fadeOut('300'); /* fading out the sub menu */
});
});