Find current position

I have the following situation which I can't figure out.

I have a menu as follows:

<ul id="top">
  <li><a href="" title="">Link 1</a>
    <ul id="sub1">
      <li><a href="" title="">Sub 1.1</a></li>
      <li><a href="" title="">Sub 1.2</a></li>
    </ul>
  </li>
  <li><a href="" title="">Link 2</a>
    <ul id="sub2">
      <li><a href="" title="">Sub 2.1</a></li>
      <li><a href="" title="">Sub 2.2</a></li>
    </ul>
  </li>
[..]
</ul>

Now I want the according submenu to show when a link is hovered. Herefore I have the following approach (to test it).

$("#top li").live("mouseover mouseout", function(event){
    if(event.type == "mouseover"){
        $(this).closest("ul").show();
    }else{
        $(this).closest("ul").hide();
    }
});

But that doesn't work. Apparently the mouseover event is not triggered on the Link 1 hyperlink, because when I change $(this).closest("ul").show(); to alert($(this).attr("title")); (assuming that in my working document there is an actual title description) I get an empty alert window.

How do I fix this?

Oh, forgot to mention that I use live(), because further on I need to do some stuff 开发者_如何学Cwith elements that are currently hidden.

Try find() instead of closest().