Drop down menus, z-index and IE

One of Internet Explorer’s (IE) most commonly encountered bug is when using z-index. I experienced this recently when using the DDSlider plugin for WordPress along with a drop down navigation.

Whilst doing some browser testing I noticed that the drop down menu hides behind the DDSlider. I tried to fix this using z-index. I applied positions and z-index to the offending elements but they still did not behave properly.

After Googling the issue I came across this post which explains the problem perfectly. I needed to apply z-indexes to higher level elements that sit side by side in the DOM. In my example I applied a position:relative; z-index:2 to the #header div and a position:relative; z-index:1 to the #main div. Seems to have done the trick perfectly!

Tags: , , , ,

WordPress SEO: 10 tips for better search rankings

FREE E-book. Learn the basics of WordPress SEO and how to improve the key metrics
  • We won't sell your address to anyone. We hate spam too.
View my portfolio Get in touch