JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://keith-wood.name/js/jquery.backgroundpos.js"></script>
<header id="menu">
<h1>dawe's portfolio</h1>
<nav>   
    <a id="m_portf" data-one="0" data-two="-37" href="#portfolio">portfolio</a>
    <a id="m_music" data-one="-72" data-two="-111" href="#music">music</a>
    <a id="m_about" data-one="-148" data-two="-185" href="#about">about</a>
    <a id="m_contact" data-one="-222" data-two="-259" href="#contact">contact</a>
</nav>
</header>

CSS

body{
	background-color:#ccc;	
}

nav a{
	background-image:url(http://img689.imageshack.us/img689/2996/menufc.png);
	display:block;
	width:120px;
	height:22px;
	margin-bottom:10px;
}

#m_portf{
background-position:0 -37px;
}
#m_music{
background-position:0 -111px;
}
#m_about{
background-position:0 -185px;
}
#m_contact{
background-position:0 -259px;
}

JavaScript

$(document).ready(function(){

$('nav a').hover(
function () {
	$(this).addClass('active');
	$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-one')+'px'}, 500);
//	$(this).stop().animate({backgroundPosition: '0px' +$(this).attr("data-one",+'px ')}, 500);
},
function () {
	$(this).removeClass('active');
	$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-two')+'px'}, 500);
}
);
});