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.
