jquery slidedown slideup browser issue

http://jsfiddle.net/boyee007/dYXxU/

the SlideDown and SlideUp working fine in Firefox but not Chrome or Explorer or Opera i guess!

anyone know to sort it out please!

HTML:

<ul class="mainnav">
    <li class="aboutus"><a href="#" title="About Us">About Us</a>
        <ul>
            <div>
                <li ><a href="#">What is the CU?</a></li>
                <li><a href="#">What are the benefits?</a></li>
                <li><a href="#">Reward system explained</a></li>
            </div>
        </ul>
    </li>
</ul>

jQuery:

// NAVIGATION
    $(".mainnav li").hover(function(){开发者_如何学运维
        $("ul", this).slideDown("fast");
    }, function() {
        $("ul", this).slideUp("fast");
    });

try removing: ul li:hover ul {display:block;}

Once I removed that css rule the content slide down correctly in chrome on mouseover and back up on mouseout.