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' }); });
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.
