Stacking issue in internet explorer with z-index
I am not really good with CSS, so I am having trouble making IE show my menu bar properly. As you can see in this fiddle I have a simple bar where the user can click on his username to display some options.
This code works fine in chrome and firefox, but it does this on internet explorer:
As you can see, the menu opens inside the navbar, so you will only see the first option.
Can you open this fiddle and tell me what is wrong with my code?
Thanks in advance!!
Wow this is really weird, but it was this line on the CSS!! That is why it works in the fidle, because i put a simle background for the example. For future reference, NEVER do this if you have stacking going on:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
I view the fiddle in Internet Explorer 9 and turn to IE 8 in development mode and I can see all the options. Not sure how to re-produce the bug you have.
You need to add position: relative to the parent item and position: absolute to the dropdown. You'll probably also need to alter the top attribute of #user_menu so it doesn't overlap the username (about 20px or so should do).
Modify the CSS of #user_menu to the following: