jquery - Magic Line CSS/Javascript code - Adding sub navigation -

i implementing "magic line" code navigation menu, seem having troubles when adding sub menu. when hover on sub menu items, magic line shoots way left side of page. stay on menu item submenus under.

you can view site here: http://www.christmaslightsinstallation.ca/

original script (without sub nav): http://css-tricks.com/examples/magicline/

(i tried fiddle this, since it's in wordpress wasn't translating well)

my javascript follows:

$(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 second hover function using "#menu-main-menu li li a", , trying use "preventdefault();" event. caused ton of errors.

i'm new javascript, limited on things can think of/know how do, try fix this.

$("#menu-main-menu li a").hover(function() {

change above line to:

$("#menu-main-menu > li").hover(function() {

edit:

also change:

newwidth = $el.parent().width(); 

to:

newwidth = $el.width();