List item and dropdown become unstable in IE8

Question

I have created a dropdown menu. The list items have rgba background. To make it IE8 compatible I have used -ms-filter property. But now background and dropdown submenu become unstable on hover in IE8.

I have created a jsfiddle. But unfortunately it seems that jsfiddle does not support IE8. You can download html file from here

Following is the HTML code:

<div id="side_nav" class="widget inner-box">
    <div>
        <ul>
            <li><a href="#"> Home</a></li>
            <li class="dropdown">
                <a href="#"> About us</a>
                <ul>
                    <li><a href="#">Brief history</a></li>
                    <li><a href="#">Organogram</a></li>
                    <li><a href="#">Vision, mission and strategy</a></li>
                </ul>
            </li>
            <li><a href="#"> Contact us</a></li>
        </ul>
    </div>
</div>

And CSS

#side_nav {
    background: none;
    border: 0 none transparent;
    width: 200px;
}
#side_nav div > ul {
    margin: -15px 0;
    font-weight: bold;
    list-style: none;
}
#side_nav li {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #dfdfdf;
    margin-top: 2px;

    background: none\0/;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF)";
    zoom: 1;
}
#side_nav li:first-child {
    margin-top: 0;
}
#side_nav a {
    text-decoration: none;
    display: block;
    padding: 5px 10px 5px 15px;
}
#side_nav div > ul > li {
    margin-left: -15px;
    margin-right: -15px;
    position: relative;
}
#side_nav div > ul > li:first-child > a {
    padding-top: 8px;
    padding-bottom: 8px;
    background: #666;
    color: #fff;
}
#side_nav div > ul > li.active,
#side_nav div > ul > li:not(:first-child):hover,
#side_nav div > ul > li:hover li {
    border-top-color: #666;
    border-bottom-color: #666;
}
#side_nav div > ul > li.active > a,
#side_nav div > ul > li:hover > a,
#side_nav div > ul > li:hover li a {
    background: rgba(100,100,100,0.8);

    background: none\0/;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000)";
    zoom: 1;
}
#side_nav div > ul > li.active > a,
#side_nav div > ul > li:hover a {
    color: #fff;
}
#side_nav div > ul > li ul {
    display: none;
    margin: 0;
    position: absolute;
    left: 100%;
    top: -1px;
    white-space: nowrap;
    list-style: none;
    padding: 0;
}
#side_nav div > ul > li:hover ul {
    display: block;
}
#side_nav div > ul > li ul li {
}
#side_nav div > ul > li ul a {
    padding-left: 25px;
    padding-right: 25px;
    font-style: italic;
}
#side_nav div > ul > li ul a:hover {
    background: #666;
}

Answer 1

Finally, I found this solution. rgba.php automatically generates semitransparent png images based on given values and I can conditionally call this for IE8 only.

.ie8 .widget {
    background: url(../ie8/rgba.php?r=255&g=255&b=255&a=50) repeat;
}

Answer 2

Almost identical situation happened myself on a dropdown. What I had to do was take out the ms-filter in the css, created an "IE8 and down" specific stylesheet, created a photoshop png file of a similar opacity and used that instead. Trust me, you'll save a bunch of headache going down this route :)

  <!--[if lt IE 9]>
     <link rel="stylesheet" type="text/css" href="css/ie8.css" />
  <![endif]-->

And the css in that would be:

 #yourid{
    background: url('../imgs/ie-transparency.png') repeat;
  }