I'm using a superfish menu in wordpress for the primary navigation of my website. I'm building an interactive tool that has a navigation menu inside of it seperate from the main navigation. Basically, the interactive tool is inside of the page that has the superfish menu.

The problem is when I click the navigation in the tool the height of the line is reset to "0" for some reason. So, I'm searching for a way to make it so my interactive tool menu and the superfish menu don't collide. They don't seem to be playing together nicely.

So effectively what happens is when I click the link in the interactive tool navigation the line disappears. The line appears and it will follow my mouse until the point that I click it. That's when everything falls apart.

I've tried a few things like jquery noconflict, but that didn't help. I would love to send a link, but I can't share it right now because its client work.

If anyone knows of a trick to make it so they dont collide that would great news for me. Here is part of my jquery that I'm using for the magic line.

jQuery(function() {

  var $el, topPos, newHeight;
      $mainNav = jQuery("#example-one");

  /*
      EXAMPLE ONE
  */

  /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
  jQuery("#example-one").append("<li id='magic-line' style='height:16px;'></li>");

  /* Cache it */
  var $magicLine = jQuery("#magic-line");

  $magicLine
      .height(jQuery(".current_page_item").height())
      .css("top", jQuery(".current_page_item a").position().top)
      .data("origTop", $magicLine.position().top)
      .data("origHeight", $magicLine.height());

  jQuery("#example-one li").find("a").hover(function() {
      $el = jQuery(this);
      topPos = $el.position().top;
      newHeight = $el.parent().height();

      $magicLine.stop().animate({
          top: topPos,
          height: newHeight
      });
  }, function() {
      $magicLine.stop().animate({
          top: $magicLine.data("origTop"),
          height: $magicLine.data("origHeight")
      });    
  });


      jQuery("#example-one li a").dequeue().click(function() {
  /* Cache it */
  var $magicLine = jQuery("#magic-line");

      jQuery(this).parent().siblings().removeClass("current_page_item");
  jQuery(this).parent().addClass("current_page_item");

      $magicLine
  .height(jQuery(".current_page_item").height())
  .css("top", jQuery(".current_page_item a").position().top)
  .data("origTop", $magicLine.position().top)
  .data("origHeight", $magicLine.height());
  console.log("click")
              });    


      });