Member Avatar for firefly-21

Hi Everyone,

Having a few issues with my CSS menus that need resolving.

At present you can see how the menus are rendering by browsing to . It seems that they are positioning themselves underneath the right location, where they should be dropping down from.

However, the menu items should drop directly down when the mouse hovers over the menu item.

Im pretty sure there is a tag i need to reference within my stylesheet but i cannot remember which one. My stylesheet is located at

Can anyone help?

  • 3 Contributors
  • 2 Replies
  • 95 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

For : the symptom you described (submenus appearing offset from their parent) almost always comes from how the submenu is being positioned relative to its nearest positioned ancestor, or from an ancestor creating a new stacking/positioning context. is correct to check for missing JS if your menu relies on scripts, and is right that submenus are normally hidden until hover. The missing piece is usually the positioning context and a small style tweak so the submenu drops straight below the parent (use a percentage-based vertical offset rather than a hard pixel value).

Practical debugging steps:

  • Open DevTools, inspect the submenu element and force the :hover state (Chrome has a ":hov" toggle). That lets you edit styles while the menu is visible.
  • In the Computed/Styles panel check which ancestor has a non-static position or a transform; that ancestor becomes the reference for absolute positioning.
  • Temporarily change the submenu offset to a percentage (so it reads directly under the parent) and toggle properties like overflow, transform or z-index to see what moves it.
  • Verify the submenu is actually nested inside the correct li and not moved by script. Also check the anchor display (inline anchors can shrink the hover area).

Quick checklist to fix alignment:

  • Ensure a positioned ancestor (usually the LI) is the reference.
  • Use a vertical offset that equals the parent height (top: 100%) so the submenu drops cleanly below.
  • Remove or adjust overflow:hidden or transforms on ancestors, and add z-index if the menu is behind other elements.
  • If supporting old IE or touch, add a small JS fallback to handle hover/click.

Reference reading: MDN: position and MDN: Understanding z-index.

Recommended Answers

All 2 Replies

Member Avatar for passiondance

Maybe you forgot to include the external javascript (or Jquery) for dropdown menu in the <head> </head> section... What I saw there is only external css file included.

Member Avatar for ko ko

You need to hide the sub menu until hover on it's parent 'li' tags. And show when the cursor over 'li' tags. Like:

/*need hide*/
ul ul {
display: none;
position: absolute;
width: 124px;
height: auto;
left: 0;
top: /*it parent's height, li tag*/ px
}
/*show when hover it*/
ul li:hover ul {
display: block
}

Try above codes. It should work on IE(above 7 and later), FF, Safari, Opera. For IE older, you need a script for the 'li:hover' statement.
Note that the child 'ul' is position absolute, and it will appear when you hover on it's parent 'li', 'li' tag was not relative to it's child. You need the 'li' tags relative to it's child 'ul' and appear start from it when hover.

ul li {
position: relative
}

And don't forget doctype for your html. 'Strict' mode is better. Sorry for my language skill.

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.