Cara membuat menu berputar

Judul yang agak aneh Cara membuat menu berputar hehhe tapi memang bingung juga mau di namain apa, tapi gak papalah aku jelasin dikit masalah menunya jadi gini menu itu ketika kita sorot atau sentuh maka dia akan berputar ke atas tapi bukan berputar cuman gimana ya susah juga ngejelasinnya hehehe langsung aja liat demonya :

DEMO

1. Simpan kode di bawah ini diatas kode ]]></b:skin>

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none; 
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
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;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: #555;
}
ul#topnav.v2 a{
color: #555;
background: #CCC;
}

4. Cari kode seperti ini

<b:widget id='Header1' locked='true'title='Disini nama blog anda (Header)' type='Header'/>
</b:section>
</div>

Nah Setelah ketemu simpan kode di bawah ini di bawah kode </div> tersebut.

<ul class='v2' id='topnav'>
<li><a href='/' title='HOME'>HOME</a></li>
<li><a href='#' title='MENU 1'>JUDUL LINK</a></li>
<li><a href='#' title='MENU 2'>JUDUL LINK</a></li>
<li><a href='#' title='MENU 3'>JUDUL LINK</a></li>
<li><a href='#' title='MENU 4'>JUDUL LINK</a></li>
<li><a href='#' title='MENU 5'>JUDUL LINK</a></li>
<li><a href='#' title='MENU 6'>JUDUL LINK</a></li>
</ul>

5. Setelah itu cari kode </head> setelah ketemu simpan kode di bawah ini di atas kode </head>

<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/>'); //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>

6. Lalu Klik Pratinjau jika sudah ok silahkan SIMPAN TEMPLATE, jika penempatan menunya kurang bagus silahkan anda ganti tempatnya dan jangan lupa ganti tanda # dengan URL anda.