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

Question

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

就像整个页面幻灯片为它腾出空间一样，它不会像我找到的所有脚本那样重叠。我很感激一个解释，甚至更好的是我无法在网络上某个地方找到的现成脚本。

Answer 1

jsBin 演示

jQuery：

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

HTML

  <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>

CSS：

/* 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;
}