Question

here is the link showing the problem: http://www.ukrainetraveling.com.

The CSS drop down submenu is not visible. I’ve put z-index as “1” in all divs that are there, and “200” for one that has the menu, but no result.
in chrome it works as expected.

Could you please help me with that issue?

Answer 1

IE7 is known to have problems stacking elements when using position and z-index. What you need to do is to tell the browser step by step what he should be doing.

Try this:

// menu
ul.pureCssMenu {
  position: relative;
}

If not enough, you can:

// parent of .pureCssMenu
div {
  position: relative;
}

---

Note:
Your menu as is does not work on IE8 or IE9 as well.

---

EDITED

Just notice that your document does not contain a DOCTYPE, please refer to this link to set an appropriated document type.

This is an important factor since any browser needs to know how are you writing your code, and the DOCTYPE does just that, tells the browser “I am written like this, so please use this specific set of rules to show me“.

Related to IE6, 7, 8, 9, etc… It enters on what they call “compatibility mode” that is the same as using the IE5 standards (way outdated). Refer to this link for more information.