2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag.
<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwyU1a1gbOI/AAAAAAAAAUk/L3j02eS_vEs/menu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
}
#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#menu a:hover {
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/SwyU4P9aMgI/AAAAAAAAAUs/Q5AkIuvWg3g/menuhov.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwyU1a1gbOI/AAAAAAAAAUk/L3j02eS_vEs/menu.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}
#menu li li a:hover, #menu li li a:active {
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/SwyU4P9aMgI/AAAAAAAAAUs/Q5AkIuvWg3g/menuhov.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>
Note: Please host menu.jpg and menuhov.jpg images yourself.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<div id="foxmenucontainer">
<div id="menu">
<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>
<li><a href="#" title="#">About</a></li>
<li><a href="#" title="#">WebDesign</a>
<ul>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#" title="#">Subscribe</a></li>
<li><a href="#" title="#">Register</a></li>
<li><a href="#" title="#">Contact</a></li>
</ul>
</div>
</div>
You are done.Look at the picture below.
Demo
If you find this article useful, please feel free to link to this page from your website or blog. You can simply copy-paste the following code into your page to create a link.or subscribe rss
