列表悬停megamenu隐藏无法选择

Question

嗨，亲爱的，我正在使用megamenu，我只是写了一个代码，而不是下载和添加代码.i，只是写了显示菜单悬停的mega菜单div的代码，.it工作得很好，但我有一个问题。在悬停一个div显示后，它不能在超大菜单中选择内容。我不知道如何在jquery中编写代码，当悬停列表时，它也允许选择内容。当我试图在下方的megamenu中悬停时，当光标移动时，它是隐藏的。

我的HTML代码

 <div class="menu">
        <ul>
          <li><a href="#" class="tech">Chipsets</a></li>
          <li><a href="#" class="tech">Wireless Modules</a></li>
          <li><a href="#" class="tech">Divices & Services</a></li>
          <li><a href="#" class="tech">IP Licensing</a></li>
          <li><a href="#" class="tech">Technology</a></li>
        </ul>
      </div>
    <div class="megamenu">Content here11.Services..1</div>
<div class="megamenu">Content here222.Training..2</div>
<div class="megamenu">Content here..Communities.3</div>
<div class="megamenu">Content here..Store.4</div>
<div class="megamenu">Content here..Store.5</div>

JQuery代码

$('.tech').hover(function(){
            divTrigger = $('.tech').index(this);            
         $('.megamenu:eq('+divTrigger+')').show();
    },function(){
         $('.megamenu:eq('+divTrigger+')').hide();      

        });

JSBIN链接http://jsbin.com/IyUhUYi/2/edit

任何人都能解决我的问题。

Answer 1

首先，尝试使用嵌套的li，并使用css设置样式，使其看起来像一个下拉列表，而不是悬停div，因为当前您的代码显示，在hover show this div上，没有任何代码表明它实际上是一个下拉或可选div，当您将光标移开时，它就会消失。

Answer 2

最好这样做并删除jquery

<div class="menu">
        <ul>
          <li><a href="#" class="tech">Chipsets</a>
             <div class="megamenu">Content here11.Services..1</div>
          </li>
          <li><a href="#" class="tech">Wireless Modules</a>
              <div class="megamenu">Content here222.Training..2</div>
          </li>
          ....
        </ul>
      </div>

并使用此css

.menu ul li div
{
   display:none;
}

.menu ul li:hover div
{
    display:block;
}