jquery - li element hover event and show sub menu? -

html codes

<ul class="menu"> <li>deneme</li> <li>deneme <ul> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> </ul> </li> <li>deneme <ul> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> </ul> </li> <li>deneme</li> <li>deneme</li> <li>deneme <ul> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> <li>alt menu</li> </ul> </li> <li>deneme</li> </ul>​ 

javascript:

$(document).ready(function(){ $("ul.menu > li").css("color","red"); $("li ul li").css("color","blue") $("li ul li").hide(); $("ul.menu li").hover( function() { $("li ul li").show(); }, function() { $("li ul li").hide(); } ); });​ 

and question, want show current's submenu item hover event. code show sub menus. how can fix ?

thanks.

provide context element selection in hover handler.

try this:

$(document).ready(function() { $("ul.menu > li").css("color", "red"); $("li ul li").css("color", "blue") $("li ul li").hide(); $("ul.menu li").hover( function() { $("ul li", this).show(); }, function() { $("ul li", this).hide(); } ); });​ 

working example: http://jsfiddle.net/eygsy/22/