jquery ie8 hover issue – animation / color not working on filter rotated element

http://www.the900number.com/news

In ie8 the hover state for the nav happens when you mouse over a nav item and then mouse off of it– As opposed to hover state firing when you actually put the mouse over the item.

It works great in IE7 so I'm not sure what's wrong with IE8 and how it's viewing the box model. Any insight is very much appreciated!

Jquery:

//Nav hover
        $('#nav li:not开发者_如何学Go(.current)').hover(function() {
            var bgColor = $(this).css('color');
            $(this).animate({
                backgroundColor: bgColor,
                marginRight: '10px'
            }, 200);
        }, function() {
            $(this).animate({
                backgroundColor: '#000',
                marginRight: '0px'
            }, 200);
        });

CSS:

#nav {
    width: 180px;
    position: absolute;
    left: 25px;
    top: 14px;
    z-index: 100000;
    line-height: 26px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

#nav li {
    float: right;
    list-style: none;
    display: block;
    height: 29px;
    padding: 2px 0px 0 0px;
    background: black;
    margin-bottom: 2px;
    }

#nav li a {
    position: relative;
    left: 9px;
    display: block;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: "bigNoodle","refrigerator-deluxe-1", "refrigerator-deluxe-2", "helvetica neue", helvetica, arial;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    }

Any ideas?

Thanks!

I don't know why this worked, but it did. Adding the line "opacity: 1.0" made the animation work in ie8. Something to do with combining microsoft css filters.

 //Nav hover
            $('#nav li:not(.current)').hover(function() {
                var bgColor = $(this).css('color');
                $(this).animate({
                    backgroundColor: bgColor,
                    opacity: 1.0,
                    marginRight: '10px'
                }, 200);
            }, function() {
                $(this).animate({
                    backgroundColor: '#000',
                    opacity: 1.0,
                    marginRight: '0px'
                }, 200);
            });