Posted by Syed Muhammad Ali
Today I am Sharing a Beautiful Blogger Widget Created by cssmenumaker. Drop Down menu is
very important as you can use it to display categories to visitors. The Following Dropdown menu is
made by Css, has submenus. This menu is quite attractive and will help you to improve your blog
traffic. This widget is easy to install.
Preview:
Here you can Watch Live Demo of Dropdown Menu
Just Follow The Below Steps to Add To Blogger:
- Go to Blogger
- Log-In to your Dashobard
- Go to Template Section
- Click Edit Html
- Find ]]> tag by Pressing Ctrl+F Button
- Paste the Below Code Just Above It.
#cssmenu { border: none; border: 0px; margin: 0px; padding: 0px; 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: #333333; height: 35px; list-style: none; margin: 0; padding: 0; } #cssmenu li { float: left; padding: 0px; } #cssmenu li a { background: #333333 url(‘http://4.bp.blogspot.com/-P1h9O5ouu0g/UnI4D3al0BI/AAAAAAAACM8/-0CcfLsihTQ/s1600/seperator.gif’) bottom right no-repeat; display: block; font-weight: normal; line-height: 35px; margin: 0px; padding: 0px 25px; text-align: center; text-decoration: none; } #cssmenu > ul > li > a { color: #cccccc; } #cssmenu ul ul a { color: #cccccc; } #cssmenu li > a:hover, #cssmenu ul li:hover > a { background: #2580a2 url(‘http://2.bp.blogspot.com/-_yWJuSyOupU/UnI4EOfsrgI/AAAAAAAACMs/PLaM8Qrfp90/s1600/hover.png’) bottom center no-repeat; color: #FFFFFF; text-decoration: none; } #cssmenu li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200; /*top:1em; /*left:0;*/ } #cssmenu li:hover ul { display: block; } #cssmenu li li { background: url(‘http://4.bp.blogspot.com/-umjYHapJzmE/UnI4Em51a_I/AAAAAAAACM0/bMaT3SCcpfk/s1600/sub_sep.gif’) bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px; } #cssmenu li:hover li a { background: none; } #cssmenu li ul a { display: block; height: 35px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left; } #cssmenu li ul a:hover, #cssmenu li ul li:hover > a { background: #2580a2 url(‘http://1.bp.blogspot.com/-l196FBP0tUE/UnI4D-3dp9I/AAAAAAAACMo/GITDnExKeBo/s1600/hover_sub.png’) center left no-repeat; border: 0px; color: #ffffff; text-decoration: none; } #cssmenu p { clear: left; }
- Now Find and Paste the Below code Just Above/Before It.
Click Save and You Are Done!
If u face any Problem While Installing, let us know
Follow Us! 
About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter
