I have this HTML code:

<ul class="menu">
  <li>
     li first generation element
     <ul class="sub-menu">
        <li>
           li second generation element
        </li>
     </ul>
  </li>
  ...More li's first generation elements with ul's inside
</ul>

And this JQuery event:

$(".menu > li").click(function(){
    alert("click");
})

The problem that I am running into is that when I click on second generation li elements the event is being fired, this is because the first generation li element is being clicked too. This is causing that the event is fired in a wrong li element. I only want that this event fires when first generation of li elements are clicked.

How can I solve this?.