Javascript 像这样的导航菜单http://vimeo.com/

我想知道如何通过css和js构建类似的导航。我复制“静态”部分没有问题，我想知道的是如何制作他们制作的下拉菜单

就像整个页面的幻灯片为它腾出空间一样，它不会像我找到的所有脚本一样重叠。我非常感谢您的解释，或者更好的是在web上的某个地方找到一个我找不到的现成脚本

jQuery：

$('nav li:has(ul)').on('hover',function(){
    $('ul', this).stop().animate({height:'toggle'},300); 
});

HTML

---

太棒了，谢谢。经过大量的修补，我让它工作了，还有一件事，我如何让它在鼠标移动时“呆在外面”？我的意思是，如果我尝试将鼠标悬停在“观看附加菜单”上，它将滑回。@Christophergibs编辑了我的答案并简化了代码我很抱歉让你感到如此痛苦，你太棒了，但是有没有办法在你发布的第一个版本的脚本中获得同样的效果？这并不是因为我懒惰，只是因为我认为它更适合我的需要，因为我可以为每个选项卡设置不同的下拉布局，但是有了这个简化版本（wich仍然很棒，我很感谢您的努力），我认为我做不到。我真的欠你一杯啤酒。这是以前的代码片段，以防你再也没有了：$（'nav li'）.on（'mouseenter mouseleave hover'，function（e）{$（'#'+$（this.data（'open'））[e.type=='mouseenter'？'slideDown'：'slideUp']）（）；

  <nav>    
    <ul>      
      <li><a href="#">Join</a></li>      
      <li><a href="#">Login</a></li>      
      <li>
          <a href="#">Watch</a>
          <ul>
              <h2>Watch additional menu</h2>      
          </ul>     
      </li>            
    </ul>
 </nav>

/* ALL ULs */
nav ul{
  list-style:none;
  width:100%;
}

/* INNER UL */
nav li > ul{
  float:left;
  display:none;
  background:#ccc;
}

/* ALL LI */
nav li{
  display:inline;
  margin:30px;
}