.:::. MSue RoomZ .:::.

<ul id='topnav'>
<li><a href='http://msueroomz.blogspot.com/'>Home</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Services</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Twitter</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Blog</a></li>
<li><a href='http://msueroomz.blogspot.com/'>AboutMe</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Email</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Label</a></li>
</ul>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">


$(document).ready(function() {


$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});


});
</script>

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 660px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
}
ul#topnav a {
color: #FFFFFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAx9xSX4a1NDAhyphenhyphenuNvTLcWhkzDH_9F2Cncz62W9dJCUdjVgDu9buAopFZmMcYraWjRJ8lKst40juVfZvnPYiq0asAhiPXIa48ywLDUC5rT1gzNwNY16xMoZ8vwWxAZtEvtGYrMEybB243/s1600/red1.gif) repeat-x left bottom;
}
ul#topnav span {
color: #000000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDE0Y27P_IYCrl2xa9OMg2lowcYW59z92A4t7RL6DRYTpF1P2-z_2ZGLLJ7MGkaEhzk3eTw8b7j1O3e57sbnFexdBXvar3eKYT2bjj-zICMfKT5uMB2uQBH3tCu-Cj5-YmX7CFyziyegI/s1600/orange1.jpg) repeat-x left top;
}