CSS Menu loses focus when part of jquery hover()

Question

I have the following html (viewable at 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;
}

What I'm trying to do is have a menu mostly hidden at the top except when you mouse over it, and then have a submenu (just css driven) pop out when you mouse over the language.

What is happening though is that when I move onto the language list, and I go past Germany (~50% down the list?), the hover() loses focus and closes the original menu, which closes the language menu.

Any idea's what is causing the issue? Any ideas how to fix the issue? I have tried the hoverIntent() plugin as well to no avail.

EDIT: This happens in Firefox and IE 8/7. Haven't tried chrome.

Answer 1

Converting to answer to close this out:

The issue is because of margin and padding...if you remove it on that <ul> you'll see that the hover ends where elements without margin or padding would.

I'd change the menu to be shown by jQuery instead of CSS and see what behavior you get. I think the other direction you ended up taking is a better approach, a hover inside a hover is tricky at best...better to simplify it like the route you took.