将鼠标单击的块显示为默认情况下将鼠标悬停在父菜单项上

Question

我希望将一个第一个子菜单项块的块显示为一个悬停在父菜单项上的默认块。

 <ul  class="main-nav">
 <li class="main-menu item first">Parent Menu Item
      <ul  class="sub-child">
        <li class="sub-menu">
          <ul class="grand-child">
             <li class="grand-child leaf first">
                <div>A block</div>
             </li>
             <li  class="grand-child leaf">
                <div>Another block</div>
             </li>
             <li class="grand-child leaf last">
                <div>Yet Another block</div>
             </li> 
          </ul>
        </li>
      </ul>
 </li>
</ul>

Answer 1

找到解决方案：

查看这个jQuery代码：

 $(document).ready(function(){

    $('li.main-menu .leaf.first').css('display','none');

  $('li.main-menu').hover(function(){
    $('li.main-menu .leaf.first').fadeIn(500);
  },function(){
    $('li.main-menu .leaf.first').fadeOut(500);
  });

});

小提琴：https://jsfiddle.net/47hc05mr/4/