All:

I have only gotten this to work on a Wordpress site once, and I thought that I could do it again. Man, I was crazy for thinking that copying and pasting would make it work!

Here is the js:

$(function(){

    var $el, leftPos, newWidth,
        $mainNav = $("#page-nav");
         
    /*
        EXAMPLE ONE
    */
    $mainNav.append("<li id='magic-line'></li>");
    
    var $magicLine = $("#magic-line");
    
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#page-nav li").find("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")
        });    
    });
});

Here is the styling of the menu:

/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

#navigation						{ margin-bottom: 15px; }

#page-nav							{ height: 24px; background-color: #807d7d; border-top: 3px solid #f8ba4f; border-bottom: 3px solid #f8ba4f; }

.group:after 					{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;} 	

#page-nav		 			  	{ margin: 0 auto; list-style: none; position: relative; width: 960px; padding-bottom: }
#page-nav li		 			{ display: inline;}
#page-nav li a  			{ color: #f8ba4f; font-size: 14px; display: block; float: left; padding: 6px 20px 6px 20px;	
								  			text-decoration: none; text-transform: uppercase; margin: 0 auto;}
#page-nav li a:hover	{ color: white; background: #f8ba4f;}
#magic-line 					{ position: absolute; bottom: -25px; left: 0; width: 100px; height: 3px; background: #FF0000; }

.current_page_item a 	{ color: white !important; background: #f8ba4f; }

I have made the line red so that it can be seen easily. The thing moves and changes sizes, but it does not start in the correct position. Any help here would be great!