Beautifull CSS menu and how to add it in Artisteer made template

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'>
$(document).ready(function(){

 $(&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;);
     $(this).find(&quot;em&quot;).text(hoverText);
 }, function() {
  $(this).find(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;50&quot;}, &quot;fast&quot;);
 });


});
</script>

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;
}
</style> 

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'>
 <li>
        <a href='http://www.artistutorial.co.cc' title='Go to homepage'> Home</a>  
 </li>
 <li>
 <a href='http://www.artistutorial.co.cc/about/' title='Find out who I am'>About</a>
 </li>
 <li>
 <a href='http://feeds.feedburner.com/Artistutorial' title='Subscribe RSS feeds'>Subscribe RSS</a>
 </li>

</ul>

Save the template and your done.

 DEMO