Free Blog Themes, Blog Tutorials, Blog Templates, Blogger Tips, Blog Resources

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(){$(&quot;#nav li&quot;).hover(function(){$(this).find('ul:first').css({visibility:&quot;visible&quot;, display:&quot;none&quot;}).show();}, function(){$(this).find('ul:first').css({visibility:&quot;hidden&quot;});});}

$(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>

Replace # with your link urls and Link 1….n with the text of links.

9.Now click save and you are done.

Bookmark It

Hide Sites