jquery悬停不显示子菜单

Question

我正在创建一个包含子菜单的菜单，当我将鼠标悬停在具有子菜单的菜单上时，它需要显示子菜单。

当我将鼠标悬停在菜单上时，没有任何反应。 我知道它可能很小，但我似乎无法看到它。

我的菜单

<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>

我的css

.submenu {
  display: none;
}

我的查询

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

Answer 1

在课前添加.

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

Answer 2

将您的JQuery更改为：

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

添加$(this).find()表示它只会显示相关的子菜单，这意味着您的导航中可以有多个子菜单