Superfish menu, need to magic line stick to the first elements only

Question

Im building navigation using super fish and magic line.

JSFIDDLE: http://jsfiddle.net/gz7tx0rh/

Width of magic line is calculated based on parent width like so:

$(document).ready(function() {

            $("#example").append("<li id='magic-line'></li>");

            /* Cache it */
            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());

            $("#example li").find("a").hover(function() {
                $el = $(this);
                orPos = $("#example").offset().left;
                leftPos = $el.offset().left-orPos;
                newWidth = $el.parent().width();

                $magicLine.stop().animate({
                    left: leftPos,
                    width: newWidth
                });
            }, function() {
                $magicLine.stop().animate({
                    left: $magicLine.data("origLeft"),
                    width: $magicLine.data("origWidth")
                });    
            });


            var example = $('#example').superfish({
                    //add options here if required
            });
    });

It works okay for the first level of links. However if you hover over second level of links, magic line will take new width and expand. I dont want that. I just need it to be same width as first level (parent) only.

Answer 1

Thanks for negative vote for properly asked question. Anyway, I found solution. Instead of measuring a element, I switched to measure li element (first level only). Code is:

$(document).ready(function() {

            $("#example").append("<li id='magic-line'></li>");

            /* Cache it */
            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());

            $("#example > li").hover(function() {
                $el = $(this);
                orPos = $("#example").offset().left;
                leftPos = $el.offset().left-orPos;
                newWidth = $el.width();

                $magicLine.stop().animate({
                    left: leftPos,
                    width: newWidth
                });
            }, function() {
                $magicLine.stop().animate({
                    left: $magicLine.data("origLeft"),
                    width: $magicLine.data("origWidth")
                });    
            });


            var example = $('#example').superfish({
                    //add options here if required
            });
    });