Dropdown Menu With CSS and JQuery

Bismillah (In The Name of Allah) Trick now is how to create a Dropdown menu using CSS and Jquery, It's easy and simple really, for example See here;

• Step One you click on Layout and click edit HTML and do not expand the widget Lost Check
• After that you are looking for code ]]></b:skin> , and replace the code with the code below
.lowerbar ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } .lowerbar li { margin: 0px 0px 2px 0px; padding: 0px 0px 1px 0px; border-bottom: 1px dotted #ccc; } ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 620px; background: #222; font-size: 1.2em; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjylcbqe9_JxfegdAuv5s7rEbd9Q4uqeRmA46y0exPNmZY8CG700kynwrdurgDahSoP41ct-eTbRRRw5e68PI5SsRu_Atxc0I5q62N0KA1_jaCaEZ-sgv58IEuW0r_s67r5EyhFWXS5kAsr/s128/topnav_bg.gif) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjylcbqe9_JxfegdAuv5s7rEbd9Q4uqeRmA46y0exPNmZY8CG700kynwrdurgDahSoP41ct-eTbRRRw5e68PI5SsRu_Atxc0I5q62N0KA1_jaCaEZ-sgv58IEuW0r_s67r5EyhFWXS5kAsr/s128/topnav_bg.gif) no-repeat center top; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDxHzyAPdDlz9mZtJFj9v_dlSHWnDs_sWcsOo8AaDXSTIWEeLV9Zn69I5QxOKUXNTe47sYMftwditW8Zxnsr1_f0PaBgXTkryIS6vS9Io5yDxyFIDtF51wfAgWmCovdmZZoKGoNoK9JSG4/) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggI34-B6SRl0uGtH0RRKIhDdrD14jZMEKHRj5jGBqMsAH90hl9QiYdVYckaVHidq_nIqIbj6FwGwP1CuOI5-1_2qUlSODZPcOEPD31wFPTmQ16dBel7S2FT0WbFwLLSn6vmNyn0ZGRzCgZ/s128/dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggI34-B6SRl0uGtH0RRKIhDdrD14jZMEKHRj5jGBqMsAH90hl9QiYdVYckaVHidq_nIqIbj6FwGwP1CuOI5-1_2qUlSODZPcOEPD31wFPTmQ16dBel7S2FT0WbFwLLSn6vmNyn0ZGRzCgZ/s128/dropdown_linkbg.gif) no-repeat 10px center; } ]]></b:skin>
• The next step to install JQuery
• Put the code in JQuery, under the tag </head>
<script src='http://feflex.googlecode.com/files/jquery.js' type='text/javascript'/>
• click the save if it is
• Your next step into the blogger page element and add the widget HTML / Javascript
• Enter the code continues below
<ul class="topnav"> <li><a href="#">Home</a></li> <li> <a href="#">Tutorials</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li> <a href="#">Resources</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Submit</a></li> </ul>
• Continue to replace the sign # with a link you
• Next step click Save
• To change the background of your stay replace this code https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjylcbqe9_JxfegdAuv5s7rEbd9Q4uqeRmA46y0exPNmZY8CG700kynwrdurgDahSoP41ct-eTbRRRw5e68PI5SsRu_Atxc0I5q62N0KA1_jaCaEZ-sgv58IEuW0r_s67r5EyhFWXS5kAsr/s128/topnav_bg.gif with the background that you like
• To adjust the width, you find ul.topnav code, there is writing width, and hold you change size to fit your template.
  
• Good luck and Happy Blogging

About the Author

I'm Hung Duy, the founder of Xml Blogger Templates (XBT). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2006 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Twitter or On Facebook

Visit xmlbloggertemplates.com for more Blogger Templates

Posted in: CSS,Javascript