jquery slideToggle not working : pls help ...

[_Jack_Frost]

hi, i have a menubar from the below css:
#ul_menubar, #ul_menubar ol
{
background-color:#ffffff;
color:#000000;
margin:0;
padding:0;
list-style:none;
width:auto;
overflow:auto;
}

#ul_menubar li
{
background-color:#8fbbbf;
color:#ffffff;
float:left;
padding:0 1px 0 0;
}
#ul_menubar li a
{
background-color:#6A9F00;
display:block;
padding:0 5px 0 5px;
}
#ul_menubar li a:link, #ul_menubar li a:visited
{
background-color:#475D5F;
color:#fff;
text-decoration:none;
}
#ul_menubar li a:hover, #ul_menubar li a:focus, #ul_menubar li a
{
background-color:#8fbbbf;
color:#ffffff;
}

#ul_menubar li:hover ol
{
display:block;
}


#ul_menubar ol
{
display:none;
z-index:999;
}


Now i did the below jquery code to slideToggle (liked the effect so used it) the submenus:
$(document).ready(function() {
$('#ul_menubar').find('li').hover(function() {
$(this).find('ol').slideToggle('slow');
}, function() { }
);
});

Here is the html for the menu:

<table width='100%' height='100%' border='1' style="background-color:White">
<tr><td width='100%' height='100%'>
<ol id='ul_menubar'>
<li><a href='Login.aspx'>MenuItem7</a>
<ol>
<li><a href='Login.aspx'>SubMenuItem1</a></li>
<li><a href='Login.aspx'>SubMenuItem2</a></li>
<li><a href='Login.aspx'>SubMenuItem3</a></li>
</ol>
</li>
<li><a href='Login.aspx'>MenuItem6</a>
<ol>
<li><a href='Login.aspx'>SubMenuItem1</a></li>
<li><a href='Login.aspx'>SubMenuItem2</a></li>
<li><a href='Login.aspx'>SubMenuItem3</a></li>
</ol>
</li>
</ol>
</td></tr>
</table>


the problem is that the slideToggle does not work as expected. On hover the menus slide down. But on removing the mouse pointer the menus don't slide up.

if i don't use jquery and simply stick to the hover method of CSS, the up/down works fine for the menus. But i need to use the slideToggle() function.

please help to resolve...... Thanks in advance...

[ZABI]

$(document).ready(function() {
$("#ul_menubar>li>ol").hide();
$('#ul_menubar').find('li').hover(
function() {
$(this).find('ol').slideToggle('slow');
}
);
});

[_Jack_Frost]

thnx ZABI, but this is not working. the basic problem remains the same. On hover the menu slides down. But, on unhover/mouseout the menu does not slide up.

Also, the i had to add a secondary function to hover in order to run it.

$(document).ready(function() {
$("#ul_menubar>li>ol").hide();
$('#ul_menubar').find('li').hover(
function() {
$(this).find('ol').slideToggle('slow');
},
function(){}
);
});

[_Jack_Frost]

Guys... can someone please look into the above issue.....

i am using VS 2008 and jquery 1.2.6

[ZABI]

can you show me the link to online problem ?

or you can follow an easy tutorial here http://acrisdesign.com/2010/03/jquer...on-hoverclick/