$(document).ready(function(){

    $('#productmenu > ul > li').append('<span class="hover"></span><span class="imghover"></span><span class="active"></span>');
    $('#productmenu > ul > li').hover(
        function () {
            $(this).find(".hover").fadeIn();
            $(this).find(".imghover").fadeIn();
        }, 
        function () {
            $(this).find(".hover").fadeOut();
            $(this).find(".imghover").fadeOut();
        }
    );
    $('#productmenu > ul > li').click(
        function () {
            if($(this).attr('class') == 'active')
                {
                $(this).find("ul").fadeOut('fast');
                $(this).find("span.active").fadeOut('fast');  
                $(this).removeClass('active');
                }
            else
                {
                $('li.active ul').fadeOut('fast');
                $('#productmenu > ul > li').removeClass('active');  
                $(this).addClass('active');
           
                $("span.active").fadeOut('fast');
                $(this).find("ul").fadeIn('fast');
                $(this).find("span.active").fadeIn('fast'); 
                }
        }
     
    );
   




})