css navigation problem

[kevindougans]

Hi guys,

I've got a bug I can't figure out on my navigation and I was wondering if anyone can help: http://mambo.3thirteen.co.uk/en/contact

As you'll see on that page the navigation bar at the top has a little color changing effect. It works great until you hit refresh on the page - and then the "selected" navigation seems to lose its place by forgetting a margin or something but I can't figure out where.

The navigation bar uses a bit of jQuery but that seems to work fine, until refresh so I'm sure it's a CSS bug.

Anyone got any pointers?

The Jquery code form it is:

var $el, leftPos, newWidth;
		        $mainNav2 = $("#example-two");
		
		    
		    $mainNav2.append("<li id='magic-line-two'></li>");
		    
		    var $magicLineTwo = $("#magic-line-two");
		    
		    $magicLineTwo
		        .width($(".current_page_item_two").width())
		        .height($mainNav2.height())
		        .css("left", $(".current_page_item_two a").position().left)
		        .data("origLeft", $(".current_page_item_two a").position().left)
		        .data("origWidth", $magicLineTwo.width())
		        .data("origColor", $(".current_page_item_two a").attr("rel"));
		                
		    $("#example-two a").hover(function() {
		        $el = $(this);
		        leftPos = $el.position().left;
		        newWidth = $el.parent().width();
		        $magicLineTwo.stop().animate({
		            left: leftPos,
		            width: newWidth,
		            backgroundColor: $el.attr("rel")
		        })
		    }, function() {
		        $magicLineTwo.stop().animate({
		            left: $magicLineTwo.data("origLeft"),
		            width: $magicLineTwo.data("origWidth"),
		            backgroundColor: $magicLineTwo.data("origColor")
		        });    
		    });
		    
		    /* Kick IE into gear */
		    $(".current_page_item_two a").mouseenter();

And the CSS is:

.nav-wrap { 
	margin: 50px auto; 
	background-color: rgba(0,0,0,0.6); 
	border-top:    2px solid white; 
	border-bottom: 2px solid white; 
}

/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */



#magic-line { 
	position: absolute;
	bottom: -2px; 
	left: 0; 
	width: 100px; 
	height: 2px; 
	background: #fe4902;
}
.current_page_item a { 
	color: white !important; 
}
.ie6 #example-one li, .ie7 #example-one li { 
	display: inline; 
}
.ie6 #magic-line {
	bottom: -3px;
}


/* Example Two */
#example-two { margin: 0 auto; list-style: none; padding: 6px 0 4px; position: relative; width: 960px; }
#example-two li { float: left; padding-top: 10px; padding-bottom: 10px; }
#example-two li a { position: relative; z-index: 200; color: #eeeeee; font-size: 14px; padding-left: 20px; padding-right: 20px; padding-top:15px; padding-bottom:15px; text-decoration: none;  }
#example-two #magic-line-two { position: absolute; float: none; padding: 6px 0 4px; top: 0; left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

#example-two li a:hover { 
	color: white; 
}

.current_page_item_two a { 
	color: white !important; 
}
.ie6 #example-two li, .ie7 #example-two li {
	display: inline;
}

Thanks guys!

Kevin