CodePen

HTML

            
              <div class="nav-wrap">   
  <ul class="group" id="fancy-nav">
      <li class="current_page_item_two"><a rel="#038680" href="#">Home</a></li>
      <li><a rel="#038680" href="#">Interviews</a></li>
      <li><a rel="#038680" href="#">Blogs</a></li>
      <li><a rel="#038680" href="#">About</a></li>
      <li><a rel="#038680" href="#">Contact</a></li>
  </ul> 
</div>
            
          
!

CSS

            
              * { 
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; 
  /* outline: 1px dotted salmon; */
  }
body {
  background-color: #EFEFEF;
  font: 100%/1.375 "helvetica neue", helvetica, tahoma, sans-serif;
}
.nav-wrap {
  overflow: auto;
  margin: 0 auto;
  padding-top: 2em;
  background-color: #252625;
  border-bottom: 0.25em solid #038680;
	}
				
#fancy-nav { 
	float: right;
	position: relative; 
  width: 50%;
}

#fancy-nav li { 
  list-style: none;
  float: left;
}

#fancy-nav li a { 
	position: relative; 
	z-index: 200; 
	color: #bbb; 
	font-size: 0.8em; 
	display: block; 
	float: left; 
	text-decoration: none;
	text-transform: uppercase; 
	padding: 0.6em 1em 0.3em;
}

#fancy-nav li a:hover { 
	color: white; 
}

#fancy-nav #magic-line-two { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100px; 
	/* background: #900;  */
   background-color: #038680;
	z-index: 100; 
	-moz-border-radius-topleft: : 5px;
	-moz-border-radius-topright: : 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-radius: 5px 5px 0 0;
}

.current_page_item_two a { 
	color: white !important; 
}

.ie6 #fancy-nav li, .ie7 #fancy-nav li {
	display: inline;
}

@media only screen and (max-width: 800px) {
  #fancy-nav { 
  width: 98%;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // http://css-tricks.com/jquery-magicline-navigation/
// http://css-tricks.com/examples/MagicLine/
// Tried to isolate an issue posted on the css-tricks.com/forums -> http://css-tricks.com/forums/discussion/24993/help-with-jquery-magicline-navigation
$(function() {

    var $el, leftPos, newWidth;
        $mainNav2 = $("#fancy-nav");
     
    /*
        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"));
                
    $("#fancy-nav 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")
        });    
    });
    
    /* Kick IE into gear */
    $(".current_page_item_two a").mouseenter();
    
}); 
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................