Question

我希望在悬停产品链接时显示<div class="megamenu">，我无法弄明白。

<nav id="nav">
    <ol class="nav-primary">
        <li class="level0 nav-1 first"><a href="#" class="level0">Home</a></li>
        <li class="level0 nav-2"><a href="#" class="level0">About</a></li>
        <li class="level0 nav-3" id="products"><a href="#" class="level0 products">Products</a>
        <li class="level0 nav-4"><a href="#" class="level0">Projects</a></li>
        <li class="level0 nav-5"><a href="#" class="level0">Service</a></li>
        <li class="level0 nav-6 last"><a href="#" class="level0">Contact Us'</a></li> 
    </ol>
</nav>
<div class="megamenu">This is for test</div></li>

Answer 1

不能使用CSS（至少现在不行）。如果.megamenu在每个li里面，那么你可以使用CSS。但是对于.megamenu不是.nav-primary的孩子的特殊情况，你可以像这样使用jQuery：

$(document).ready(function() {
  $('#nav .nav-primary a').mouseenter(function() {
    $('.megamenu').show();
  });
  $('#nav .nav-primary a').mouseleave(function() {      
    $('.megamenu').hide();
  });
});

您可以在此处查看此示例：http://jsfiddle.net/zxfb8gxL/

我想在产品悬停时显示类mega菜单

1 个答案: