Get another element with jQuery

I build multi level menu and my HTML structure looks like this:

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>
   <ul> #this is set up as display: none;
     <li>subitem 1</li>
     <li>subitem 2开发者_开发问答</li>
     <li>subitem 3</li>
   </ul>
 </li>
 <li>item 3</li>
 <li>item 4</li>
</ul>

And I am solving a question, how to display all subitems after moving the cursor on the item1. I can do something like this:

   $('ul li ul').mouseover(function() {
      $(this).find('li').show();
   });

But this doesn't works me... could anyone help me, please, how to display sub-ul block of items for mouseover event?

Thank you

EDIT: Thanks for your replies guys, I already found my stupid fault thanks to your helps.

Attach it to the parent LI, otherwise there is not an element that is displayed for the mouseover to fire on.

Note as well that if all you have in the LI containing the UL is the UL with the non-displayed LI's, it will potentially be hard to mouseover that as well.

$('ul li ul').parent().mouseover(function() {
    $(this).find('li').show();
});

http://jsfiddle.net/kSq4T/1/

You could always add a class to your item elements and do something like this:

       <ul>
 <li class="item">item 1</li>
 <li class="item">item 2</li>
 <li>
   <ul> #this is set up as display: none;
     <li>subitem 1</li>
     <li>subitem 2</li>
     <li>subitem 3</li>
   </ul>
 </li>
 <li>item 3</li>
 <li>item 4</li>
</ul>

$('#item').mouseover(function()
      $(this).children.show();

write your function in $(document).ready

$(document).ready(function(){

   $('ul > li > ul').mouseover(function() {
      $(this).find('li').show();
   });

});