Magic Line CSS/Javascript code - Adding sub navigation


Staff member
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="" rel="nofollow"></a>

Original script (without sub nav): <a href="" rel="nofollow"></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("&lt;span id='magic-line'&gt;&lt;/span&gt;");
var $magicLine = $("#magic-line");

    .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();
        left: leftPos,
        width: newWidth
}, function() {
        left: $"origLeft"),
        width: $"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.