Question

I have a very simple JavaScript and CSS hover menu setup apart of the menu on my website. It works great almost everywhere, EXCEPT – there is an issue with the z-index on IE8.

.rolloverMenu {
    background-color: #4A5508;
    border-bottom: 1px solid #AC4718;
    border-left: 1px solid #AC4718;
    border-right: 1px solid #AC4718;
    box-shadow: 2px 2px 2px #AC4718;
    float: left;
    margin-left: -15px;
    margin-top: -12px;
    padding: 10px 10px 6px;
    position: absolute;
    width: 200px;
    z-index: 1000;
}

It goes behind my content and doesn’t stay on top of, as supposed to. I know theres different stacking rules in IE, so any suggestions??

(Also have tried setting to z-index:9999;)

Answer 1

Set the z-index to the div that your menu is hiding behind to a lower z-index than your menu.