javascript - 在元素悬停时显示 div，以便 div 内的元素应该是可点击的

Question

$().ready(function() {

  // Case : 1
  $("li.products").hover(function() {
    $(this).parents(".cotnainer-fluid").next().toggleClass("show");
    //$("#category-list").css("opacity","1 !important");
  });
})

div.banner {
  width: 100%;
  height: 379px;
}
div.banner>.row {
  padding: 0 35px;
}
/* .menu{
	background: transparent;
	opacity: 0.5;
} */

.menu {
  margin-right: 0;
  margin-left: 0;
}
#menu-items {
  background: #121212;
  opacity: 0.7;
}
#menu-items {
  padding: 22px;
  margin: 0 25px;
  text-align: center;
  border-radius: 0 0 4px 4px;
}
ul#menu-items li {
  list-style: none;
  display: inline;
  color: #939598;
  font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
  padding-bottom: 20px;
}
ul#menu-items li>a:hover {
  color: #fff;
  border-bottom: 4px solid #76bd1c;
}
li.item {
  padding: 25px;
}
li.search {
  margin-left: 145px;
}
#category-list {
  width: 900px;
  height: 180px;
  margin: 0 auto;
  /* 
        margin-top: -380px;
         */
  background-color: #f7f6f5;
  position: relative;
  top: -380px;
  z-index: -1;
  display: none;
}
.show {
  display: block;
}
/* li.products:hover #category-list{
        display: block;
      } */

#category-list ul li {
  list-style: none;
  display: inline-block;
}
.category-menu {
  padding-top: 80px;
}
.category-menu {
  font: normal 12px/16px Gotham-Medium;
  color: #603913;
}
#category-menu-items {
  margin-top: 5px;
}
#category-menu-items li {
  text-align: center;
}
.padding-left60 {
  padding-left: 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
  </script>


  <div class="cotnainer-fluid" style="margin-top: 40px;">
    <div class="banner">
      <div class="row menu">
        <ul id="menu-items">
          <li class="item"><a href="Home.html">HOME</a>
          </li>
          <li class="item"><a href="About-Us.html">ABOUT US</a>
          </li>
          <li class="item products dropdown"><a href="#" data-toggle="dropdown" data-hover="dropdown">PRODUCTS</a>
          </li>
          <li class="item"><a href="Store.html">STORE</a>
          </li>
          <li class="item"><a href="Home.html/#contactUs-form">CONTACT</a> 
          </li>
          <li class="item"><a href="#">LOGIN</a>
          </li>


          <li class="item search"><a href="#"><i class="search-icon-header" style="font-size: 16px;"></i></a>
          </li>

          <li class="item basket"><a href="#"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i></a>
          </li>
        </ul>
      </div>
      <h1 class="page-title">Some Title</h1>
    </div>
  </div>
  <!-- End Nav items -->


  <div id="category-list">
    <div class="row category-menu">
      <ul id="category-menu-items">
        <li class="padding-left60">
          <a href="">
            <p>
              <img src="../image/bioorgo-biopesticides.png" alt="">
            </p>
            <p>BIOPESTIDES</p>
          </a>
        </li>
        <li class="padding-left60">
          <a href="">
            <p>
              <img src="../image/bioorgo-nutrients.png" alt="">
            </p>
            <p>NUTRIENTS</p>
          </a>
        </li>
        <li class="padding-left60">
          <a href="">
            <p>
              <img src="../image/bioorgo-biofertilizers.png" alt="">
            </p>
            <p>BIOFERTILIZERS</p>
          </a>
        </li>
        <li class="padding-left60">
          <a href="">
            <p>
              <img src="../image/bioorgo-seeds.png" alt="">
            </p>
            <p>SEEDS</p>
          </a>
        </li>
        <li class="padding-left60">
          <a href="">
            <p>
              <img src="../image/bioorgo-garden_Acc.png" alt="">
            </p>
            <p>GARDEN ACCESSORIES</p>
          </a>
        </li>
      </ul>
    </div>
  </div>

我在导航栏中有一个元素列表，现在将鼠标悬停在其中一个列表项上，我想显示一个隐藏的 div，其中包含另一个应该可点击的元素列表。

In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!

我想我需要检查 hasClass('show')，如果是这样，那么我应该能够悬停并单击 div 元素。
关于如何推进此元素有任何建议或帮助吗？

Answer 1

ID选择器的优先级高于类选择器。 Ref.

//Make sure this style is overwrite the style of #category-list
#category-list.show{
    display: block;
}