Jquery Firefox中下拉菜单内容的间距

我使用无序列表制作了一个带有CSS和jQuery的下拉菜单。问题在于firefox中列表项的间距不相等。它适用于Chrome和IE。我尝试过使用reset.css，但也不起作用：

HTML

jQuery

$(function(){

                $("ul.menu li").hover(function(){

                    $(this).addClass("hover");
                    $('ul:first',this).css('visibility', 'visible');

                }, function(){

                    $(this).removeClass("hover");
                    $('ul:first',this).css('visibility', 'hidden');

                });

                $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

            })

​

---

​

在我的FF浏览器上看起来没有问题，但通常在出现类似问题时，我会将normalize.css与reset.css结合使用，跨浏览器兼容性始终是一个挑战，但normalize会尝试覆盖浏览器的默认样式表，以便在所有浏览器上以类似方式呈现。

在我的（FF ver 17+）上也会出现问题

#wrapper {
    margin:auto;
    width:960px;    
}

#wrapper h1,h2,h3,h4,h5,h6 {
    color:black;

}

#wrapper ul.menu {
    float:left;
    list-style-type:none;
    margin:50px 0 30px 0;
    padding:0;
}

#wrapper ul.menu a {
    color: #666;
    font: bold 12px Lora, serif;
    text-decoration: none;    
}


#wrapper ul.menu li
    {    
        float: left;
        list-style: none;
        padding:0;
        margin-right:20px;
        position: relative;

    }
#wrapper ul.menu li a
    {    display: block;
         text-decoration: none;
        white-space: nowrap
}

#wrapper ul.menu li a:hover
    {    
    color:#163a24;
    }

#wrapper ul.menu li ul
        {    
            margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-radius:10px;
            background: #fff;
            box-shadow: 1px 1px 15px #888888;
        }


#wrapper ul.menu ul li
        {    
        float: none;
        display: inline;
        text-transform:capitalize;
                           }

#wrapper ul.menu ul li a
        {    
        width: auto;
        border-bottom:1px solid #225A37;
                padding:10px;
                }

       #wrapper ul.menu ul li a:hover {
                color:#2E8052;                    
      }                    

#wrapper ul.menu ul li:last-child a                
        {
        border-bottom:none;        
        }

$(function(){

                $("ul.menu li").hover(function(){

                    $(this).addClass("hover");
                    $('ul:first',this).css('visibility', 'visible');

                }, function(){

                    $(this).removeClass("hover");
                    $('ul:first',this).css('visibility', 'hidden');

                });

                $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

            })