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

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/