Question

I am using a drop-down list using jquery when the user hover the main menu it will drop down and its working fine in all browsers except the IE7 and below i am using z-index to display the drop-down menu in-front of all elements but its wont works.

the menu items(dummydummy) goes behind the textbox and the button

style of the submenu items is

#sub-menu {

z-index: 1000;
}

and the textbox and buttons are grouped inside a div and the div’s style is

#grouped {
left: 100px;
position: absolute;
z-index:1;
}

Answer 1

z-index only work with position relative, absolute & fixed. So, Give position:relative to your #submenu. Write like this:

#sub-menu {
 position:relative;
 z-index: 1000;
}