Question

我有以下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％？）时，hover（）会失去焦点并关闭原始菜单，从而关闭语言菜单。

任何想法是什么导致了这个问题？任何想法如何解决问题？我已经尝试过hoverIntent（）插件也无济于事。

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

Answer 1

转换为答案以关闭此内容：

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

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

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

1 个答案: