Horizontal Navigation Menu Links with submenu For Blogger

I have seen many Horizontal Tab Memu Links in Blogs and ever wonder if I can add some Drop Down Sub Menu Links to each Tab Menu, so that user can navigate through more categories easily.
Now, I find the solution, and share with you guys.
Demo of Horizontal Navigation Menu Links with submenu:- Cyber Jedi (old Blog)

Just Go To Layout > Edit Html

And Search For </b:skin>

Now add these below Css codes before it-

/*add by me for navTab*/
#subnavbar {
background: #90B557;
width: 660px;
height: 24px;
color: #2E4C0B;
margin: 0px;
padding: 0px;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #2E4C0B;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
background: #BED3A0;
color: #3A5C04;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #BED3A0;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #FFFFFF;
margin: 0px;
padding: 6px 10px 6px 10px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}

/*add by me for navTab*/

Please edit the width of the above codes in red to adjust to the width of the navigation menu to adjust it to yours template width.You can change the color and design of above css also if you are capable of it.
Now Search for below codes-

<div id="'header-wrapper'">
<b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'">
<b:widget id="'Header1'" locked="'true'" title="'Testing" type="'Header'/">
</b:section>
</div>

And add the below codes after the above codes:-

<!--add by me for navTab-->
<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Technology</a>
<ul>
<li>
<a href='http://cyberjedizen.blogspot.com/'>News</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Events</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Robotics</a>

</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Projects</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Tips</a>
</li>
</ul>
</li>
<li>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Science</a>
<ul>

<li>
<a href='http://cyberjedizen.blogspot.com/'>Physics</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Environment</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Space Tech</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Innovations</a>
</li>
<li>

<a href='http://cyberjedizen.blogspot.com/'>Breakthroughs</a>
</li>
</ul>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Web 2.0</a>
<ul>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Wanna be?</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Latest news</a>
</li>

<li>
<a href='http://cyberjedizen.blogspot.com/'>Web Development</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Geek Events</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>2nd Opinions</a>
</li>
</ul>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Design</a>

<ul>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Photoshop</a>
</li>
<li>
<a href='#'>Web 3.0</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Freelance</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Tips and tricks</a>
</li>

</ul>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>Blogger</a>
<ul>
<li>
<a href='http://cyberjedizen.blogspot.com/'>templates</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>enhancements</a>
</li>
<li>
<a href='http://cyberjedizen.blogspot.com/'>tips and tricks</a>

</li>
</ul>
</li>
</ul>
</div>

<!--add by me for navTab-->

[ Supporting files]
[ Socialize This]