jquery hover not displaying submenu

Question

I'm creating a menu that has submenus and when I hover on a menu that has a submenu it needs to display the submenus.

When I hover my mouse over the menu, nothing happens. I know it's probably something small, but I can't seem to see it.

My menu

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul class="submenu">
            <li>
                <a href="#">Product 1</a>
            </li>
        </ul>
    </li>
  </ul>
</div>

My css

.submenu {
  display: none;
}

My query

$('.menu li').hover(
  function () {
    $('submenu').show();
  }, 
  function () {
   $('submenu').hide();
  }
);

Answer 1

Change your JQuery to :

$('.menu li').hover(
  function () {
    $(this).find('.submenu').show();
  }, 
  function () {
   $(this).find('.submenu').hide();
  }
);

Adding $(this).find() means it will only show the relevant submenu, meaning you can have multiple submenus in your navigation

Answer 2

add . before class

$('.submenu').show();