我想在产品悬停上显示超大型菜单。

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 this的子级，您可以这样使用jQuery：

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

您可以在这里看到这个示例：http://jsfiddle.net/zxfb8gxL/