当jquery悬停（）的一部分时，CSS菜单失去焦点

我有以下html（可在查看）

CSS:

我想做的是让一个菜单大部分隐藏在顶部，除非你把鼠标移到上面，然后当你把鼠标移到语言上时，会弹出一个子菜单（只是css驱动的）

但现在发生的是，当我进入语言列表时，经过德国（~50%在列表下方？），hover（）会失去焦点并关闭原始菜单，从而关闭语言菜单

知道是什么导致了这个问题吗？有没有办法解决这个问题？我也尝试过hoverIntent（）插件，但没有成功

---

编辑：这发生在Firefox和IE8/7中。尚未尝试chrome。

转换为答案以结束此操作：

这个问题是因为边距和填充…如果您在

上删除它，您将看到悬停结束在没有边距或填充的元素可能会出现的位置

---

我会将菜单更改为由jQuery而不是CSS显示，然后查看您得到的行为。我认为你最终选择的另一个方向是更好的方法，在盘旋中盘旋充其量是很棘手的…最好像你选择的路线那样简化它。

@Steve-访问时出错：@Nick正在上传代码更改…现在检查一下。@Steve-目前没有时间给你解决问题，但是问题是因为边距和填充…如果您在

上删除它，您将看到悬停结束于没有边距或填充的元素可能会出现的位置。我会将菜单改为用jQuery而不是CSS显示，看看你会有什么行为……如果你没有得到答案，我明天会检查一下，看看能做些什么。@Nick我明白你的意思了。并非所有人都熟悉jquery，因此是混合的。我将看看把它移到jquery上能做些什么。我已经决定取消下拉菜单，只需要一个指向语言页面的链接。我最初的想法在实践中效果不太好。

<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>

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

#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;
}