html - 我想在产品悬停时显示超大型菜单

我想在产品链接悬停时显示<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>

最佳答案

无法仅使用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/