How To Add jQuery Horizontal Sub Navigation Menu to Blogger

1. Login to your blogger dashboard--> Template- -> Edit HTML ----> Proceed and clicked on Expand Widget, then you continue with step, now to find anything in your blogger template html, just hint Ctrl+F to bring out the find button to search for any code of your choice there.
This is how it is going to look like:

2. Now type in the box </head> to search for it, after doing that, just follow the next step .

3. Copy below code and paste it just before the </head> tag .

$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});
</script>

Note:
You can change width,height,color,... as your choice.

4. Now go to Layout--> from your dashboard to  "Add a gadget".

5. Select "HTML and JavaScript" and add one of code below and hint save.

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE</a>
<span>
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE
</a> |
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE
</a> |
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE
</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

Then it will look like this: