$(function(){
            // remove link background images since we're re-doing the hover interaction below 
            // (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
            // we also want to only remove the image on non-selected nav items, so this is a bit more complicated
            $(".subNav").children("li").each(function() {
               var current = "subNav current-" + ($(this).attr("class"));
               var parentClass = $(".subNav").attr("class");
               if (parentClass != current) {
                  $(this).children("a").css({backgroundImage:"none"});
               }
            });
            // create events for each nav item
            attachNavEvents(".subNav", "navSubcate01");
			attachNavEvents(".subNav", "navSubcate02");
			attachNavEvents(".subNav", "navSubcate03");
			attachNavEvents(".subNav", "navSubcate04");
			attachNavEvents(".subNav", "navSubcate05");
            attachNavEvents(".subNav", "navSubcate06");
			attachNavEvents(".subNav", "navSubcate07");
			attachNavEvents(".subNav", "navSubcate08");
            function attachNavEvents(parent, myClass) {
               $(parent + " ." + myClass).mouseover(function() {
                  $(this).append('<div class="subNav-' + myClass + '"></div>');
                  $("div.subNav-" + myClass).css({display:"none"}).fadeIn(200);
               }).mouseout(function() {
                  $("div.subNav-" + myClass).fadeOut(200, function() {
                     $(this).remove();
                  });
               }).mousedown(function() {
                  $("div.subNav-" + myClass).attr("class", "subNav-" + myClass + "-click");
               }).mouseup(function() {
                  $("div.subNav-" + myClass + "-click").attr("class", "subNav-" + myClass);
               });
            }
         });