Magic Line CSS/Javascript code - Adding sub navigation

[admin]

I am implementing this "Magic Line" code into my navigation menu, but I seem to be having troubles when adding a sub menu. When you hover over any sub menu items, the magic line shoots all the way to the left side of the page. I would like it to stay on the menu item that the submenus are under.

You can view my site here: <a href="http://www.christmaslightsinstallation.ca/" rel="nofollow">http://www.christmaslightsinstallation.ca/</a>

Original script (without sub nav): <a href="http://css-tricks.com/examples/MagicLine/" rel="nofollow">http://css-tricks.com/examples/MagicLine/</a>

(I tried a fiddle for this, but since it's in wordpress it wasn't translating very well)

<strong>My javascript is as follows:</strong>

$(function() {

var $el, leftPos, newWidth,
    $mainNav = $("#menu-main-menu");

$testing = $(".menu-header");

$testing.append("<span id='magic-line'></span>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#menu-main-menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});
});

I tried creating a second hover function using "#menu-main-menu li li a", and trying to use a "preventdefault();" event. Which just caused a ton of errors.

I'm fairly new to javascript, so limited on things I can think of/know how to do, to try a fix for this.