Have you heard of google, did you do a simple search before starting this pointless thread??..there's hundreds there FFS http://lmgtfy.com/?q=create+a+DropDown+menu
<div class="nav"> <----------Begin Nav menu <ul><---------------------------------------------Begin menu list <li><a href="#">link1</a> <------------------------------------------Begin main link <ul><----Drop down begin <li><a href="#">Dropdown1</a></li> <------ Drop down 1 <li><a href="#">Dropdown2</a></li> <------ Drop down 2 <li><a href="#">Dropdown3</a></li> <------ Drop down 3 </ul><------Drop down end </li><-----------------------------------------------------------------------End of main link </ul><--------------------------------------------End of menu list </div><----------------------End Nav Menu <div class="nav"> <ul> <li><a href="#">link1</a> <ul> <li><a href="#">Dropdown1</a></li> <li><a href="#">Dropdown2</a></li> <li><a href="#">Dropdown3</a></li> </ul> </li> </ul> </div> HTML:
<divid='cssmenu'> <ul> <liclass='active'><ahref='index.html'>Home</a></li> <liclass='has-sub '><ahref='#'>Products</a> <ul> <liclass='has-sub '><ahref='#'>Product 1</a> <ul> <li><ahref='#'>Sub Item</a></li> <li><ahref='#'>Sub Item</a></li> </ul> </li> <liclass='has-sub '><ahref='#'>Product 2</a> <ul> <li><ahref='#'>Sub Item</a></li> <li><ahref='#'>Sub Item</a></li> </ul> </li> </ul> </li> <li><ahref='#'>About</a></li> <li><ahref='#'>Contact</a></li> </ul> </div>
<body><divclass="wrapper-demo"><divid="dd"class="wrapper-dropdown-3"tabindex="1"><span>LogIn</span><ulclass="dropdown"><li> Username<inputtype="text"id="UN"><br/> password<inputtype="text"id="pass"><br/><inputtype="submit"id="login"value="login"></li></ul></div></div></div><!-- jQuery if needed --><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><scripttype="text/javascript">function WTF(){ window.location.href ="";}functionDropDown(el){this.dd = el;this.placeholder =this.dd.children('span');this.opts =this.dd.find('ul.dropdown > li');this.val ='';this.index =-1;this.initEvents();}DropDown.prototype ={ initEvents:function(){var obj =this; obj.dd.on('click',function(event){ $(this).toggleClass('active');returnfalse;});}} $(function(){var dd =newDropDown($('#dd')); $(document).click(function(){// all dropdowns $('.wrapper-dropdown-3').removeClass('active');});});</script></body>
HTML Code for Drop Down List - <!DOCTYPE html> <html> <body> <select> <option value="Magento">Magento</option> <option value="WordPress">WordPress</option> <option value="Drupal">Drupal</option> <option value="Joomla">Joomla</option> </select> </body> </html>
There are ways to do this with pure CSS now. I would consider one of those. JQuery is also a good alternative. Once you learn the basics, you can do some really amazing things with it.
Pure CSS is how I would do it - Here's a great resource site for creating all kinds of css menus: http://css.maxdesign.com.au/listamatic/