$(document).ready(function(){
      // Get the ID of the body
      var parentID = $("body").attr("id");
      // Loop through the nav list items
      $("#nav li").each(function() {
        // compare IDs of the body and list-items
        var myID = $(this).attr("id");
        // only perform the change on hover if the IDs don't match (so the active link doesn't change on hover)
        if (myID != "n-" + parentID) {
          // for mouse actions
          $(this).children("a").hover(function() {
            // add a class to the list item so that additional styling can be applied to the <em> and the text
            $(this).addClass('over');
	          // add in the span that will be faded in and out
						$(this).append("<span><\/span>");
            $(this).find("span").fadeIn(400);
          }, function() {
            $(this).removeClass('over');
						// fade out the span then remove it completely to prevent the animations from continuing to run if you move over different items quickly
            $(this).find("span").fadeOut(400, function() {
				      $(this).remove();
						});
          });
          // for keyboard actions
          $(this).children("a").focus(function() {
						//check whether the link is already being hovered over before applying the class and extra span
						//required for Firefox which makes the link unclickable if there's two spans layered on top of the anchor
						if ($(this).attr('class')!='over') {
							$(this).addClass('over');
							$(this).append("<span><\/span>");
							$(this).find("span").fadeIn(400);
						}
          });
          $(this).children("a").blur(function() {
						$(this).removeClass('over');
						$(this).find("span").fadeOut(400, function() {
							$(this).remove();
						});
          });
        }
      });
    });