On hover
First in css you need to hide sub menu, like this
css
ul li ul{
display:none;
}
js
$('ul li').hover(function(){
$('ul',this).css('display','block');
},function(){
$('ul',this).css('display','none');
});
.hover(first parameter, [second parameter])
first parameter take mouse in and second take mouse out which is optional. For both parameters we have created anonymous function.
on Click
use toggleClass like this
js
$('ul li').click(function() {
$('ul',this).toggleClass( 'showSubmenu');
});
css
.showSubmenu{
display:block;
}
Note
You need to put class on ul or wrap ul in div with class and then target in jquery with that class otherwise it will be applied to all ul li on web page.