function - Replace hover event with click in JQuery -

i'm using following jquery code control style elements on mouse hover drop down menu solution:

$(window).load(function () {      // on hover show or hide     $("#menu ul li").hover(function(){              $(this).children("ul").show();              $(this).children("ul").css('background-image', 'none');        },        function(){              $(this).children("ul").hide();      })      // on hover show or hide     $("#menu ul ul li, #menu ul ul li ").hover(function(){              $(this).css('color', '#666');        },        function(){              $(this).css('color', '#fff');            })  }); 

see working example:

http://www.youmeusdesign.co.uk/menu_test

i modify can replace hover function click function. when client using touch interface not support hover functionality. windows phone example. ios works ok device has classes handle hover events.

i've tried modifying script replacing .hover .click not work?

e.g.

$("#menu ul li").click(function(){ 

any appreciated.

try one: (tested here: http://jsfiddle.net/d9mpc/)

$("#menu ul li").on("mouseover mouseout tap",function(event){           if($(this).children("ul").is(":hidden") && (event.type == "mouseover" || event.type == "tap")){          $(this).children("ul").show();          $(this).children("ul").css('background-image', 'none');    }else if($(this).children("ul").not(":hidden") && (event.type == "mouseout" || event.type == "tap")){          $(this).children("ul").hide();    }     });  // on hover show or hide $("#menu ul ul li, #menu ul ul li ").on("mouseover mouseout tap",function(event){            if(!$.hasdata($(this),"hovered") && (event.type=="mouseover" || event.type=="tap")){          $(this).css('color', '#666');          $.data((this),"hovered",true);    }else if($.hasdata((this),"hovered") && (event.type=="mouseout" || event.type=="tap")){          $(this).css('color', '#fff');        $.removedata((this),"hovered");    } });