Why hovering in this menu is not working in IE?

Question

When a anchor is hovered in this menu it should turn its background white. It works in Firefox and Chrome but in IE the words just disappear and the background doesn't turn white.

(the current anchor link works in IE is just the hover that doesn't work)

EDIT: the color property in a:hover is working in IE the problem is just the background-color property.

Like in the following picture:

Here is what happen when I hover a link in IE (in this case espanol):

CSS:

#lang {
    float: right;
    padding: 0 0 0 0;
    margin: 50px 25px 0 0;
    width: 285px;
}
#lang li {
    font-size: 10px;
    float: right;
}
#lang li a#english, #spanish, #chinese {
    color: #FFF;
    float: right;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 200px; /* ie fix */
}
#lang li a#english {
    padding-left: 231px;
}
#lang li a#spanish {
    padding-left: 228px;
}
#lang li a#chinese {
    padding-left: 219px;
}
#lang li a:hover {
background: #FFF;
color: #444;
}
#lang li.current a {
    background: #FFF !important;
    color: #444 !important;
    cursor: default;
}

HTML:

<ul id="lang">
                <li <?php if($lang_file=='lang.en.php') {echo 'class="current"';} ?>><a id="english" href="index.php?lang=en">english</a></li>
                <li <?php if($lang_file=='lang.es.php') {echo 'class="current"';} ?>><a id="spanish" href="index.php?lang=es">español</a></li>
                <li <?php if($lang_file=='lang.zh-tw.php') {echo 'class="current"';} ?>><a id="chinese" href="index.php?lang=zh-tw">中文(繁體)</a></li>
                <li <?php if($lang_file=='lang.zh-cn.php') {echo 'class="current"';} ?>><a id="chinese" href="index.php?lang=zh-cn">中文(简体)</a></li>
            </ul>

Answer 1

#lang li.current a {
    background: #FFF !important; /*!important may be causing the issue*/
    color: #444 !important;      /*!important may be causing the issue*/
    cursor: default;
}

also change:

#lang li a:hover {
background: #FFF;
color: #444;
}

to:

#lang li a:hover {
background-color: #FFF;
color: #444;
}

Answer 2

Try using a background-image instead of just a background color, even if the image is just a white block repeated. I had the same problem, googled and found this, then fixed it using an image ;)