$(document).ready(function() {
  
  $("li.parent span").hover(
    function () {
      var element = "." + $(this).attr("rel");
      $(element).addClass("active");
      var menu = $(this).parent();
      $("ul",menu).show();
    },
    function () {
      $(".active").removeClass("active");
      var menu = $(this).parent();
      $("ul",menu).hide();
    }
  );
  
  $("li.parent ul").hover(
    function () {
      var that = $(this).parent();
      $("span",that).addClass("active");
      $(this).show();
    },
    function () {
      var that = $(this).parent();
      $("span",that).removeClass("active");
      $(this).hide();
    }
  );

  $("li.childless span").hover(
    function () {
      var element2 = "." + $(this).attr("rel");
      $(element2).addClass("active2");
    },
    function () {
      $(".active2").removeClass("active2");
    }
  );
});