当jquery hover()的一部分时,CSS菜单失去焦点

我有以下 HTML(可在 www.communityftw.com查看)

<table width="100%">
                        <tr>
                            <td style="text-align: left">
                                <!-- 2008.3.1314.35 --><span id="headerSearch1_sb_form_q_wrapper" class="RadInput_Default" style="white-space:Nowrap;"><input value="language..." type="text" size="20" id="headerSearch1_sb_form_q_text" name="headerSearch1_sb_form_q_text" class="riTextBox riEmpty sw_qBoxTop" name="q" style="width:140px;" /><input id="headerSearch1_sb_form_q" name="ctl00$headerSearch1$sb_form_q" class="rdfd_" style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" type="text" value="" /><input id="headerSearch1_sb_form_q_ClientState" name="headerSearch1_sb_form_q_ClientState" type="hidden" /></span>
                                <input type="submit" name="ctl00$headerSearch1$sb_form_go" value="" id="headerSearch1_sb_form_go" class="sw_qbtnTop" />
                            </td>
                            <td style="text-align: left">
                                <ul id="menu">
                                    <li class="languageContainer">
                                        <div>
                                            <a href="#" id="languageField">
                                                <img src="/images/flags/ca.png" alt="Canada" />
                                                Canada (English)</a>
                                        </div>
                                        <ul id="language">
                                            <li><a href="#" id="A1">
                                                <img src="/images/flags/ca.png" alt="Canada" />
                                                Canada (french)</a> </li>
                                            <li><a href="#" id="A2">
                                                <img src="/images/flags/us.png" alt="United States" />
                                                United States</a> </li>
                                            <li><a href="#" id="A3">
                                                <img src="/images/flags/de.png" alt="Germany" />
                                                Germany</a> </li>
                                            <li><a href="#" id="A4">
                                                <img src="/images/flags/fr.png" alt="France" />
                                                France</a> </li>
                                            <li><a href="#" id="A5">
                                                <img src="/images/flags/ru.png" alt="Russia" />
                                                Russia</a> </li>
                                            <li class="last">
                                                <img alt="" src="images/langLocDrop_r4_c1.png" />
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        </tr>
    </table>

使用Javascript / jQuery的

$('#slide').animate({ top: '-=34' },1000); $("#slide").hover(function () { $(this).animate({ top: '+=34' }); },function () { $(this).animate({ top: '-=34' }); });

CSS：

#menu
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
    float: left;
    z-index: 1000;
}
#menu a
{
    color: #dc2525;
    text-decoration: none;
}
#menu > li
{
    background: none repeat scroll 0 0;
    cursor: pointer;
    float: left;
    position: relative;
}
#menu > li a:hover
{
    color: orange;
}
#menu ul
{
    padding: 0px;
    margin: 0px;
    display: block;
    display: inline;
}
#menu li ul
{
    position: absolute;
    left: -15px;
    top: 0px;
    margin-top: 20px;
    width: 170px;
    line-height: 16px;
    background-image: url(/images/langLocDrop_r2_c1.png);
    display: none;
}
#menu li:hover ul
{
    display: block;
}
#menu li ul li
{
    display: block;
    margin: 5px 20px;
    padding: 5px 0px;
    border-top: dotted 1px #606060;
    list-style-type: none;
}
#menu li ul li:first-child
{
    border-top: none;
}
#menu li ul li a
{
    display: block;
}
#menu li ul li a:hover
{
    color: orange;
}
.languageContainer div
{
    display: inline;
    padding: 5px;
}

#languageField img
{
    display: inline;
    vertical-align: middle;
}

#language img
{
    display: inline;
}

#menu .last
{
    background: transparent none repeat scroll 0% 0%;
    margin: 0px;
    padding: 0px;
    border: none;
    position: relative;
    border: none;
    height: 0px;
}

我要做的是有一个主要隐藏在顶部的菜单,除非你将鼠标悬停在它上面,然后当你将鼠标悬停在语言上时弹出一个子菜单(只是css驱动).

发生了什么事情,当我进入语言列表,然后我走过德国(列表中约50％？)时,悬停()失去焦点并关闭原始菜单,关闭语言菜单.

任何想法是什么导致了这个问题？任何想法如何解决问题？我试过hoverIntent()插件也无济于事.

编辑：这发生在Firefox和IE 8/7中.还没试过镀铬.

解决方法

转换为答案以关闭此：

问题是由于边距和填充…如果你删除它< ul>你会看到悬停结束没有边距或填充的元素.

我将更改菜单以通过jQuery而不是CSS显示,并查看您获得的行为.我认为你最终采取的另一个方向是一个更好的方法,悬停在悬停内部是最棘手的…更好地简化它就像你采取的路线.