Javascript菜单不工作Firefox

Question

我正在开发一个具有子菜单的水平菜单。当用户将鼠标悬停在父菜单上时，我需要使用Javascript显示子菜单。

我在JSFiddle中写了一个例子，但它在FireFox中似乎失败了!在Chrome中，IE和Safari正在运行!

下面是测试页面:www.andreferreira.eu5.org

代码如下:jsfiddle.net/R2ySL/

<script>
$(document).ready(function () {
    var $nav = $('#menu > li');
    $nav.hover(
        function() {
            $('li', this).stop(true, true).slideDown('fast');
            $('a',this).first().css({"background-color":"#FFF", "color":"#debe65"});
        },
        function() {
            $('ul', this).slideUp('fast');
           $('a',this).first().css({"background-color":"", "color":"#FFF"});
        }
    );
});
</script>

Answer 1

你可以不通过javascript改变css规则，只需添加以下内容到你的样式表

#menu li:hover > a {
    color: #debe65;
    background-color: #FFF;
    text-decoration:none;
}

和javascript应该看起来像

$(document).ready(function () {
    var $nav = $('#menu > li');
    $nav.hover(
    function () {
        $('li', this).stop(true, true).slideDown('fast');
    },
    function () {
        $('ul', this).slideUp('fast');
    });
});