1.Log in to your dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </b:skin> tag.
3.Now copy below code and paste it just before </b:skin> tag .
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}
Note: If you want you can change above code as you like.
4.Now again Scroll down to where you see </head> tag.
5.Now Copy below code and paste it just before </head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
function showmenu(){
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility:"visible", display:"none"}).show();
}, function(){
$(this).find('ul:first').css({visibility:"hidden"});
});
}
$(document).ready(function(){
showmenu();
});
</script>
6.Now save your template.
7.Go to Layout-->Page Elements.
8.Click on "Add a Gadget" and select 'HTML/Javascript' and add the code given below.
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<ul>
</ul></ul></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
<ul>
</ul></ul></li>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Link 4.1</a></li>
<li><a href="#">Link 4.2</a></li>
<li><a href="#">Link 4.3</a></li>
<ul>
</ul></ul></li>
<li><a href="#">Link 5</a>
<ul>
<li><a href="#">Link 5.1</a></li>
<li><a href="#">Link 5.2</a></li>
<li><a href="#">Link 5.3</a></li>
<ul>
</ul></ul></li>
<li><a href="#">Link 6</a></li>
</ul>
Note: Above code is example only.You can add many links if you like.
Replace blue colour codes with your link names.
Replace # with your link urls.
9.Now click save and you are done.It will look like this: