Member Avatar for louie540

Hi there.

I'm trying to create a mobile navigation bar that has a drop down menu. I have most of it set up already, but the only sub-menu link I can view is from the last main menu button, the rest of the sub-menu buttons hide behind the main navigation. It might be a simple fix.

Here's the link:

Updated link

Both the LOGIN and REGISTER buttons have a sub-menu button, but the one for LOGIN is not visible on roll-over.

Thank you.

Edited by louie540
  • 1 Contributor
  • 1 Reply
  • 132 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by louie540

Dani AI

Generated

Nice work, — glad you found an approach that worked. For future readers who want to debug the original behavior (only the last submenu appearing), here are the usual causes and a small, practical fix you can drop into a custom layout.

Most common culprits

  • An ancestor with overflow: hidden or overflow: auto is clipping absolutely positioned submenus.
  • An ancestor has a transform, filter, opacity, or will-change set — these create a new stacking context and make z-index behave unexpectedly.
  • z-index only affects positioned elements; if the submenu or its parents are not positioned, stacking order can be unpredictable.
    Quick checks in DevTools: temporarily toggle overflow on the nav wrapper, search ancestors for transform/filter/opacity, and inspect computed position and z-index.

Minimal CSS + toggle pattern
This pattern keeps submenus out of flow and on top. Use a class like .open for tap/click toggling on mobile.

nav { position: relative; }
nav li { position: relative; }
nav li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: none;
  background: #fff;
}
nav li.open .submenu,
nav li:focus-within .submenu { display: block; }

Basic mobile toggle (vanilla JS)

document.querySelectorAll('nav .has-sub > a').forEach(function(a){
  a.addEventListener('click', function(e){
    var li = a.parentElement;
    if (!li.classList.contains('open')) {
      e.preventDefault();
      document.querySelectorAll('nav .has-sub').forEach(function(n){ n.classList.remove('open'); });
      li.classList.add('open');
    }
  });
});

If an ancestor transform/overflow is unavoidable, move the submenu outside the clipped container (append to body) and position it with JS, or use position: fixed. Also test with touch and keyboard; use :focus-within and proper ARIA roles for accessibility.

Member Avatar for louie540

I managed to achieve this a different way by using a style from this website: http://astuteo.com/mobilemenu and went with @media only screen and (min-width: 480px) { } in CSS for the full screen browser.

Thanks anyway.

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.