I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout.
Here is the HTML code snippet:
<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> </li>
</ul>And here is the CSS code snippet:
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 could really use some help with this. Thank you!