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).

More on the IE bug here.

Modify the CSS of #user_menu to the following:

top: 30px;

Need Your Help

Web-based form designer and workflow tool

graph workflow web-based skelta

I need a web-based tool which support for easy designing forms, role-based users for completing the forms and an embedded report and chart generator for analyzing data (if charts support drill-down...

Python - Send HTTP GET string - Receive 301 Moved Permanently - What's next?

python http redirect tcp network-programming

I'm trying to use Python 2 to send my own HTTP GET message to a web server, retrieve html text, and write it to an html file (no urllib, urllib2, httplib, requests, etc. allowed).