Member Avatar for Nithya.G

In my application iam unable to click the items in the menu.
And my browser is IE 7. And i have used the menu control for displaying the menu items on mouseover function.

Note: Iam able to click the items in IE 6 browser.

Plz help me sort out this problem.

Thanks in Advance,
Nithya.

  • 3 Contributors
  • 2 Replies
  • 112 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by serkan sendur

Dani AI

Generated

This builds on the troubleshooting pointers from , and and focusses on the two most common root causes and quick fixes so the menu items become clickable.

First, verify whether the submenu is being covered by another element or whether your show/hide logic is closing the menu before the click fires. A quick way to check is to give the menu and its potential overlappers a temporary outline or background so you can see real-time overlap. If the submenu is covered, the fix is usually a stacking/positioning change; if the submenu disappears when you try to move to click, the fix is in the show/hide mouse logic (add a small hide-delay or keep the submenu alive while the pointer is inside).

Typical CSS fixes (ensure the menu actually creates its own stacking context and sits above others):

/* make the top container positioned and stacked higher */
.nav { position: relative; z-index: 100; zoom: 1; }

/* submenu must be absolutely positioned and higher z-index */
.nav .submenu {
  position: absolute;
  z-index: 1000;
  background: #fff; /* makes it obvious when testing */
}

zoom:1 is an IE-specific trick that gives the element "hasLayout" and can fix some stacking quirks; see the hasLayout discussion at QuirksMode and stacking context rules at MDN for details (, MDN z-index / stacking context).

If the menu is shown/hidden on mouseover, add a short delay and cancel the hide when the pointer enters the submenu. Example pattern:

var hideTimer;
trigger.onmouseenter = function(){ clearTimeout(hideTimer); submenu.style.display = 'block'; };
trigger.onmouseleave = function(){ hideTimer = setTimeout(function(){ submenu.style.display = 'none'; }, 200); };
submenu.onmouseenter = function(){ clearTimeout(hideTimer); };
submenu.onmouseleave = function(){ hideTimer = setTimeout(function(){ submenu.style.display = 'none'; }, 200); };

If these steps don't help, post the rendered HTML/CSS (the actual DOM markup and computed z-index values) so the community can spot overlapping containers or misplaced z-index rules.

Recommended Answers

All 2 Replies

Member Avatar for schlo_50

Could you please post the code responsible for displaying the menu items? Also, are any errors being generated?

We might be able to help you further with this information.

Thanks

Member Avatar for serkan sendur

enable debug mode in your internet explorer 7 so that you can debug using visual studio the line that causes the error.

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.