Stylish CSS Drop Down Menu-submenu for blogger-website

Today, I am Going to posting a article about how to add css Horizontal drop down Menu with sub menu for blogger blog. if you are using blogger platform blog and if you want to add sub-menu for each category this are not available from blogger by default templates. So you can add this hovering Menu which are good and attractive black color.

This is Drop down menu with sub menu that's are very import to your website because who have a lot of sub categories and sub menu that's are very useful this widget.

What is feature of this menu :

This Menu are are very attractive for it's Black and white hovering combination and also eyecatching. It's look are very simple and well design.

How can I add stylish CSS Drop down Menu-sub menu to your blog ?

1. Go to Blogger account.

2. Now select "Template"

3. Now Click on EDIT HTML Button"

4. Now click Proceed button.

5- Tick Mark on the Expand Widget Templates check box

6. Find this word by using Ctrl+F

]]></b:skin>

just paste the below code above line

*/ #menu {width:960px; background: #0475FF; height:25px;; text-align:center; position:relative; z-index:20;} #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} #menu ul {display:inline-block;} #menu li {margin:0; padding:0; list-style:none;} #menu li {clear:both;float:none;} #menu ul ul {position:absolute; left:-9999px;} #menu ul.menu1 {margin:0 auto;} #menu ul.menu1 li.menu1-li {float:left; display:block; position:relative;clear:none;} #menu ul.menu1 {background:#0475FF;} #menu ul.menu2 {background:#000000;} #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/ #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;} #menu ul.menu1 li.menu1-li a.menu1-a {float:left;} #menu ul li:hover > ul {visibility:visible; left:0; top:25px;} #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;} #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;} #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;} #menu a:hover ul {left:0; top:23px;} #menu li.left a:hover ul {left:auto; right:-1px; top:23px;} #menu li.left ul a {text-align:right; padding:0 15px 0 15px;} #menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;} #menu li.left a:hover a:hover ul, #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;} #menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;} #menu li.left a:hover ul ul, #menu li.left a:hover a:hover ul ul {left:-9999px;} #menu li a.fly {font-variant: small-caps;} #menu li.left ul a.fly {font-variant: small-caps;} #menu li a:hover, #menu li a.fly:hover {background-color:#000000;} #menu li:hover > a, #menu ul li:hover > a.fly {background-color:#000000;} #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;} #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;} #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;} #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;} #menu ul, .tabs-outer {overflow:visible;} #menu li a {border: none;} .main-outer {z-index:10;}/*for IE*/ .tabs-outer {z-index:11;}/*for IE*/

Now , go to blogger and click layout

Click ad gadget and select HTML/Javascript

Paste below code there

<div id="menu"><ul class="menu1"><li class="menu1-li"><a class="menu1-a" href="http://www.myblogtips.org">Home</a></li><li class="menu1-li"><a class="menu1-a fly" href="http://www.myblogtips.org">Contact Us</a> <ul class="menu2"><li><a href="#url">Email</a></li><li><a href="#url">Telephone</a></li><li><a href="#url">Online Form</a></li><li><a href="#url">Snail Mail Address</a></li></ul></li><li class="menu1-li"><a class="menu1-a fly" href="#url">Surrounding Area</a> <ul class="menu2"><li><a href="#url">Where to go</a></li><li><a href="#url">What to do</a></li><li><a href="#url">Places of interest</a></li><li><a href="#url">National parks & Museums</a></li></ul></li><li class="menu1-li"><a class="menu1-a" href="#url">Privacy</a></li><li class="menu1-li"><a class="menu1-a" href="#url">About us</a></li><li class="menu1-li"><a class="menu1-a" href="http://html-to-xml-parser.blogspot.com/">adsense parser</a></li></ul></div>

***If you add this drop-down menu to your blog give below comment with your website or blog url***

Now just replace link url with website url

save templates.......

that's done......just go to your homepage and see the result...... If you finding any difficulty to install this widget to your blog or website just comment below...and also comment for your new thought and requirement.