www.webdeveloper.com
Results 1 to 4 of 4

Thread: Drop Down Menu coming in over the menu bar

  1. #1
    Join Date
    Jul 2011
    Posts
    5

    Drop Down Menu coming in over the menu bar

    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

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    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.

  3. #3
    Join Date
    Jul 2011
    Posts
    5
    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!

  4. #4
    Join Date
    Jul 2011
    Posts
    1
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles