1. Log in to your dashboard--> layout- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find </head>.

4. Before </head> add next code:

<script src='http://descarca.googlecode.com/files/jquery.js' type='text/javascript'/>

<script type='text/javascript'>

$(&quot;.menu2 a&quot;).append(&quot;<em/>&quot;);

$(&quot;.menu2 a&quot;).hover(function() {
$(this).find(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;50&quot;}, &quot;slow&quot;);
var hoverText = $(this).attr(&quot;title&quot;);
}, function() {
$(this).find(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;50&quot;}, &quot;fast&quot;);


5. Search for ]]></b:skin> and before it paste the next code:

<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 80%/120% Arial, Helvetica, sans-serif;
.menu2 {
margin-left: 315px;
padding-bottom: 31px;
list-style: none;

.menu2 li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
.menu2 a {
padding: 14px 10px;
display: block;
color: #000;
width: 135px;
text-decoration: none;
font-weight: bold;
background: url('http://img443.imageshack.us/img443/3980/buttony.gif') no-repeat center center;
.menu2 li em {
font-weight: normal;
background: url('http://img443.imageshack.us/img443/5159/hovermenuitem.png') no-repeat;
width: 135px;
height: 45px;
position: absolute;
top: 85px;
left: 0px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;

You can change the widht height, padding etc. values according to your needs.

6. Search for <div id='art-main'> and before it paste the next code:

<<ul class='menu2'>
<a href='http://www.artistutorial.co.cc' title='Go to homepage'> Home</a>
<a href='http://www.artistutorial.co.cc/about/' title='Find out who I am'>About</a>
<a href='http://feeds.feedburner.com/Artistutorial' title='Subscribe RSS feeds'>Subscribe RSS</a>


Save the template and your done.