HOW TO ADD COOL CSS MENU TO YOUR BLOG - STEPS WITH PICTURES

Today we are going to show you how to create a cool css dropdown menu. As you can see we have a very nice looking dropdown menu and we are going to shift to a new template in a week or so. So we thought to show you the way to create a cool dropdown menu like ours.This CSS Menu is very simple to use and you will not face any difficulty to make change to any of the link and design, This CSS Menu is our first Menu and we are very satisfied with its performance and ability to work in smartphones and tablets (You can only see the use of this CSS Menu in smartphones and tablets only if you have deactivated the Mobile View in blogger) Simple steps and no need to to be worried at all.

• Open Blogger > Dashboard > Blog > Page Layout.
• Now in the area you want to create the drop-down menu select 'Add a Gadget'. You should choose the one in header area. But if you want it somewhere else, do whatever you want to do.

• In the Pop-up Select 'HTML/Java Script' Gadget.

• You can leave the Title box empty. Paste this code in content box :-

<div><style type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#7acaee;height:35px;list-style:none;margin:0;padding:0}#cssmenu li{float:left;padding:0}#cssmenu li a{background:#7acaee url('') bottom right no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu > ul > li > a{color:#fff}#cssmenu ul ul a{color:#fff}#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2zDi0RjWGmWHYs6CEBJvVbXXYMekmRn1a8h4nddit2XAGM6b0_hN29rcc1OuaArCo58Ft3fcnF15Lbsw4O4Dzz-sozGG1pALYfbgQ7bhBpBlJj5QxSqP6ywkmscsQaIqsNFVlVlXyhve/s1600/hover.png') bottom center no-repeat;color:#66bbdd;text-decoration:none}#cssmenu li ul{background:#92d0f4;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover ul{display:block}#cssmenu li li{background:url('') bottom left no-repeat;display:block;float:none;margin:0;padding:0;width:200px}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#7acaee url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUemwsnDlDk9TWSXxtG3bK-xbsGByYQnoQrHXChIIta7MXAl4sRwFoegolnurNNKWfepV15WqRKXuh7z7msZsrAVXmjj1K0ifxakHT7tlPVTcY9HCRMv3BWPwpHGsE2yzKd3Gwq2pe6vlp/s1600/hover_sub.png') center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu p{clear:left}</style>

<div id="cssmenu">

<ul>

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li>

<li><a href="#"><span>YOUR TEXT</span></a>

<ul>

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li>

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li>

</ul>

</li>

<li><a href="#"><span>YOUR TEXT</span></a>

<ul>

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li>

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li>

</ul>

</li>

</ul>

</div></div>

• Change YOUR TEXT with The Menu Or Sub-Menu you want to have at that place.
• Change YOUR LINK with the link following the Name you have given to the menu.
• To create a new normal menu paste the following link before the last '</ul>'.

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li> 

• To create a new sub-menu paste the following link before </ul>.

<ul>

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li>

<li><a href="YOUR LINK"><span>YOUR TEXT</span></a></li>

</ul>

</li> 

• Click on save button. Click on save arrangement in Page Layout.
• Done !! Now you can see the css menu by opening your blog.

A Screenshot of the CSS Menu

Tips and tricks :-

• You can customize the menu by changing its color to your favourite color.
• Just replace our HTML color codes with your HTML color codes.
• #7acaee,#fff,#66bbdd,#92d0f4 are the codes used by us. Change them and see special effects.
• We have given the codes so that you don't mess up with other #s. Do not touch any other #s except those we have told you or the code might not work.

We have tried to go as easy as possible but still working with HTML/Java Script gadgets is a bit difficult so, you can comment your problems in the comment box below...........