<style type='text/css'>
ul#topnav {
margin: 0px 0px;
padding: 0px;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 620px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 28px;
float: left;
text-decoration: none;
color: green;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: green; }
ul#topnav span { display: none;}
ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_-z_e7ltF-Myj2afGT9z-uScgKRYdUcHGLRO1NU9og4yeV77vtKjvfnRcahrl6jPzFTDDRDQmc6nEXskgWMNZCPVwMqohnSR17RFSmr4ehB2dN5n8gXnciz5E-uhHz-TNiCIogMAgIvNs/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_-z_e7ltF-Myj2afGT9z-uScgKRYdUcHGLRO1NU9og4yeV77vtKjvfnRcahrl6jPzFTDDRDQmc6nEXskgWMNZCPVwMqohnSR17RFSmr4ehB2dN5n8gXnciz5E-uhHz-TNiCIogMAgIvNs/s1600/vivaverdemenu.png) repeat-x left bottom;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<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>