how to set opacity IE? probem with mouse over

Question

When I am trying to set opacity in css, mouse over event is not getting fired. my css code is-

.dropmenudiv_a{
    position:absolute;
    top: 0;
    border: 1px solid white; /*THEME CHANGE HERE*/
    border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline      above*/
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    font:normal 12px Arial;
    line-height:18px;
    z-index:100;
    background-color: lightgray;
    width: 200px;
    visibility: hidden;
    opacity:0.9;
    filter: alpha(opacity = 50); // for IE
}   

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
    background:url(media/menuover.jpg) repeat-x top;
    color: white;
}

background image on mouse over is getting changed in MOZILA but not in IE?When I remove filter: alpha(opacity = 50);, it is workin fine in IE also but then opacity is not coming in IE......????

Answer 1

What you're probably seeing is the IE bug where links within a container that has a filter applied become unclickable and unfocusable.

A fix that sometimes works is to add a z-index to your links:

.dropmenudiv_a a { 
    position: relative;
    z-index: 1;
}