Want to create drop down menu in my existing main menu

Question

I am tired to create drop down menu in my existing main menu of website. I have tried many times but no result sometimes I get menu inline sometimes everything disturbed.

HTML code :

 <ul class="mainmenu"> <li><a href="<?=MakeUrl('home')?>">Best Forex Broker</a></li> <li><a href="<?=MakeUrl('toprated')?>">Top Rated Brokers</a></li> <li> <a href="<?=MakeUrl('coupons')?>"> Forex Bonus</a> <ul> <li><a href="#">drop1</a></li> <li><a href="#">drop2</a></li> <li><a href="#">drop3</a></li> </ul> </li> <li><a href="<?=MakeUrl('articles')?>">Articles & Tutorials</a></li> <li><a href="<?=MakeUrl('affiliates')?>">Affiliate Programs</a></li> <li> <a href="<?=MakeUrl('feeds')?>"><img src="<?=$site_folder?>/images/rss.png" alt="RSS" /></a> </li> <li>&nbsp;</li> </ul> 

and CSS code:

 div.mainmenu { background: url('images/body-bg.gif') 0px -50px repeat-x; } div.mainmenu div.center { background: url('images/body-bg.gif') 0px -50px repeat-x; border-bottom-color: #007399; border-left: none; border-right: none; } ul.mainmenu { height: 28px; padding: 4px 0px 5px 0px; background: url('images/body-bg.gif') 0px -50px repeat-x; } ul.mainmenu li { float: left; padding: 5px 10px 5px 12px; margin: 0px; background: url('images/mainmenu-sep2.gif') left repeat-y; font-size: 15px; } ul.mainmenu li a { color: #fff; } ul.mainmenu li a:hover { color: #e0f0ff; } ul.mainmenu img { width: 20px; height: 20px; vertical-align: middle; margin: 0px 0px -2px 0px; } 

I am waiting for anybody to help me . Thanks

Answer 1

So, you may do something like below. Add a class .dropdown to the 2dn level menu and hide it to begin with. Then, on li:hover display it. You need to apply positions to your main menu and dropdown menu as I did in the CSS. Feel free to style your dropdown the way you like. Take a look.

 ul.mainmenu { position: relative; height: 28px; padding: 4px 0px 5px 0px; } ul.mainmenu li { list-style-type: none; float: left; padding: 5px 10px 5px 12px; margin: 0px; font-size: 15px; } ul.mainmenu li a { color: #000; } ul.mainmenu li a:hover { color: #e0f0ff; } ul.dropdown { position: absolute; overflow: hidden; top: 24px; margin: 0; display: none; background: #ccc; padding: 0; max-width: 100px; } ul.mainmenu li:hover .dropdown, .dropdown:hover { display: block; } 

 <ul class="mainmenu"> <li><a href="<?=MakeUrl('home')?>">Best Forex Broker</a></li> <li><a href="<?=MakeUrl('toprated')?>">Top Rated Brokers</a></li> <li> <a href="<?=MakeUrl('coupons')?>"> Forex Bonus</a> <ul class="dropdown"> <li><a href="#">drop1</a></li> <li><a href="#">drop2</a></li> <li><a href="#">drop3</a></li> </ul> </li> <li><a href="<?=MakeUrl('articles')?>">Articles & Tutorials</a></li> </ul>