Horizontal Menu(Customizable) Widget For Blogger or Blogspot

Menus are the key tool to navigate through the site easily.We have seen a horizontal menu or a navigation bar on many websites and blogs.But very few Blogger blogs have a horizontal navigation bar like we have here at our blog.you find a simple horizontal menu on so many blogs.But this one not like that one,

1.Multi level
2.Easy to customize
3.Professional Desgin
4.All browser computability
5.Wide rang navigation

Here I'll show you how to add a horizontal menu like the one I added to my blog.

Click here to see the DEMO



Login into Blogger>Edit Html

Find ]]></b:skin>

Paste the Below code just before that

/* Start Vertical Menu From www.techtasks.blogspot.com */

#pad {height:100px;}
/* ================================================================
The original version of this stylesheet and the associated (x)html
is available at http://www.csshmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#hmenu {padding:0; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#hmenu li {float:left; margin-right:1px;}
#hmenu li a {display:block; float:left; height:30px; line-height:30px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold;

padding:0 25px 0 10px;}


#hmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#hmenu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
#hmenu li:hover {position:relative; z-index:200;}

#hmenu li:hover > a {
color:#fff;/* Menu Font Color */
background:#840; /* Menu mouse over Color */
}

#hmenu li:hover > a.sub {
color:#fff; /* Drop down item mouse over font Color */
background-color:#840; /* Drop down item mouse over background Color */
}
*/
#hmenu li.current a {color:#fff; background:#840;}


#hmenu li a.sub {
background: #333 url(http://lh3.ggpht.com/_-A4vw5BwqxA/SpjMFOl-E5I/AAAAAAAADoQ/UUbKYNRyOuM/down-arrow.gif) /* Down arrow image */
no-repeat right center;
}

#hmenu :hover ul {left:0; top:30px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */
#hmenu ul,
#hmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#hmenu :hover ul :hover ul
{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}

#hmenu :hover ul li {margin:0; border-top:1px solid #666;}
#hmenu :hover ul li a {
width:120px; /* Width of sub menu item */
padding:0; text-indent:10px;
background:#333; /* Drop down background color */
color:#ccc; /* Drop down item font Color */
height:30px; line-height:30px;}
#hmenu :hover ul li a.fly {background:#333 url(http://lh3.ggpht.com/_-A4vw5BwqxA/SpjMFZwRqII/AAAAAAAADoU/BBH3Fw1x8nA/right-arrow.gif) no-repeat right
center;}

#hmenu :hover ul :hover {background-color:#c60; color:#fff;}
#hmenu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#hmenu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#333; /* Dropdown Sub Menu background color */
color:#ccc; /* Dropdown Sub Menu font color */
}
#hmenu :hover ul :hover ul :hover {
background-color:#c60; /* Dropdown Sub Menu mouse over color */
color:#fff;/* Dropdown Sub Menu mouse over font color */
}

/* End Vertical Menu From www.techtasks.blogspot.com */

If u want customize the colors of Horizontal menu then follow the comments ( /* */ )on the above code

Go to >page elements

Then find the place where u want to add the menu...

Add Gadget>select HTML/Javascript>

Paste the following code in the content box.

<ul id="hmenu">
<li class="current"><a href="Home"><b>Home</b></a></li>
<li><a href="About Us"><b>About Us</b></a></li>

<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="sub"><a class="fly" href="#url">Dropdown two<!--[if gte IE

7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown one</a></li>
<li><a href="#url">Dropdown two</a></li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a href="#url">Dropdown five</a></li>
<li><a href="#url">Dropdown six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="support"><a href="www.techtasks.blogspot.com"><b>Tech Tasks</b></a></li>
</ul>

Change the above code according to your requirement and then,


Click on save ,That's it.

Check the blog