отобразить 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{ 
 
\t background: transparent; 
 
\t 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, который содержит другой список элементов, которые должны быть интерактивными.

В приведенном выше коде, когда я нахожу ссылку на ПРОДУКТЫ; появляется div. Теперь я хочу щелкнуть по элементам в этом div !!!!

Я думаю, мне нужно проверить hasClass ('show'), и если да, тогда я должен будет навести курсор и нажать на элементы div.
Любые предложения или помощь в том, как двигаться вперед с этим?

Answer 1

Приоритет выбора идентификатора выше, чем селектор классов. Ref.

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

Answer 2

Заменить стиль с ниже одной и попытаться изменить положение с помощью верхней части списка категории

<style> 
#category-list { 
    width: 900px; 
    height: 180px; 
    margin: 0 auto; 
    background-color: #f7f6f5; 
    position: absolute; 
    /*top: -380px;*/ 
    z-index: -1; 
    display: none; 
} 

    #category-list ul li { 
     list-style: none; 
     display: inline-block; 
    } 

.show { 
    display: block !important; 
} 

Answer 3

ли какую-то работу в этом jsfiddle.

// Show sub-menu with jQuery 
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){ 
    console.log("show sub menu"); 
    $("#category-list").show(); 
}); 
// Hide sub-menu with jQuery 
$("body *").not("#menu-items, li.products, li.products a, #category-list,  #category-list *, #category-menu-items, div.categories").hover(function(){ 
    console.log($(this)); // Log the elements that triggers hide of sub menu 
    $("#category-list").hide(); 
}); 

Не знаю, как использовать технику подменю чистого CSS.

https://jsfiddle.net/mantisse_fr/p1eupdo3/1/