Member Avatar for amrita111

Hello All,
I want to have jquery plugin for nested unordered list upto level three.I have tried searching for this but was not able to find one except.

http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

but I dnt want levels to overlap with each other.Kindly help

  • 2 Contributors
  • 2 Replies
  • 98 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by amrita111

Dani AI

Generated

As asked and as noted, overlapping is a styling/positioning issue rather than a jQuery one. Two practical patterns to avoid overlap:

  • Keep submenus in the document flow so opening one pushes content down (no absolute positioning).
  • Or, if you must float submenus, compute offsets so each submenu sits next to the previous one (more work).

Below is a simple, reliable approach (vertical menu, works for up to 3 levels or more). It uses normal flow + jQuery slide toggles so submenus do not overlap.

HTML (structure only):

<ul class="menu">
  <li>
    <a href="#">Top 1</a>
    <ul>
      <li><a href="#">Sub 1-1</a></li>
      <li>
        <a href="#">Sub 1-2</a>
        <ul>
          <li><a href="#">Sub 1-2-1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  ...
</ul>

CSS (keep submenus in flow):

.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu ul { display: none; }          /* hidden until opened */
.menu a { display: block; padding: 8px 12px; }
.menu li.open > ul { display: block; }

jQuery (toggle, close siblings, keeps everything non-overlapping):

$('.menu').on('click', 'li > a', function(e){
  var $a = $(this);
  var $sub = $a.siblings('ul');
  if (!$sub.length) return;            // allow normal links to navigate
  e.preventDefault();
  var $li = $a.parent();
  $li.toggleClass('open');
  $sub.stop(true,true).slideToggle(180);
  $li.siblings('.open').removeClass('open')
     .children('ul:visible').slideUp(180);
});

Troubleshooting/cautions:

  • If submenus still overlap, check for position:absolute on ul/li or an ancestor — change to static.
  • Avoid overflow:hidden on container (it clips slideDown).
  • If top-level anchors must navigate, add a separate toggle control (caret button) so clicks can both open the menu and still follow links.
  • Add ARIA attributes and keyboard handlers for accessibility.

This pattern is simple, degrades well on mobile, and prevents overlap because submenus are part of normal page flow.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

The overlapping is simply part of styling. What exactly are you trying to create? Navigation menu? Horizontal or vertical menu?

Do you have to use jQuery, or have you looked at doing something less complex via CSS?

Member Avatar for amrita111

I want drop down box in that manner without overlaps in jquery.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.