Drop Down Menu coming in over the menu bar

[DJMehrtens]

Please can someone help me with this?
See http://www.debmehrtens.site90.com/

For some reason, I can not seem to reposition the menu drop down boxes to sit under the menu bar. I've tried all sorts of things and they just don't seem to move.

The code I have used is -
<div class="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="active">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">CLUB INFO</a>
<ul>
<li><a href="#">Membership</a></li>
<li><a href="#">Officers</a></li>
<li><a href="history.html" title="MSLSC History">History</a></li>
<li><a href="#">Life Members</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">LIFESAVING</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Patrol Times</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Roster</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Training Calendar</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">NIPPERS</a>
<ul>
<li><a href="#">General Info</a></li>
<li><a href="#">Child Protection</a></li>
<li><a href="#">Contact Details</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Handbook</a></li>
<li><a href="#">Nipper Calendar</a></li>
<li><a href="#">Carnival Calendar</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">SURFSPORTS</a>
<ul>
<li><a href="#">Carnival Calendar</a></li>
</ul>
</li>
<li><a href="#">FORMS</a></li>
<li><a href="MARCOOLA SURF LIFE SAVING GALLERY/index.html">GALLERY</a></li>
<li><a href="contact.html" title="Contact Us">CONTACT US</a></li>
</ul>
</div>
<div class="clr"></div>
<div class="clr"></div>
</div>

I don't intend to leave the background transparent, was just trying something different, but if anyone can help get the positioning right for the drop downs, that would be fantastic! Thanks

[Cory R]

Change the ul.MenuBarHorizontal ul '0' margin to '30px 0 0'. Also, '85&#37;' as the width for the LI's works better for me, otherwise the text is pushed off the right border.

[DJMehrtens]

OMG you are amazing! Thank you so much I have been trying to do this for ages. And thank you too for the pointer on the 85&#37; - now also changed. Much better too. Thanks again!

[johnchristopher]

Hai,

Try this codes,

“DHTML” dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns.
Meet the markup

To start, we should use the best method for defining a navigation menu — a list. For this example, we will work on a simple HTML unordered list. {Line wraps are marked ». –Ed.}

<ul>
<li>Sunfishes
<ul>
<li><a href="">Blackbanded»
sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>

<li>Grunts
<ul>
<li><a href="">Smallmouth grunt
</a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li>

<li>Remoras
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>

Quite straightforward really — nice and neat HTML that, as a result, is highly accessible. But now we want to transform this into a dynamic list — the first level of list items will make up a horizontal menu bar from which the second level lists will drop down.

web solution india