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

Question

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

就像整个页面幻灯片为它腾出空间一样，它并没有像我发现的所有脚本那样重叠。我很欣赏一个解释，或者甚至更好的在网络上的某个地方，我已经无法做到找到。

Answer 1

jsBin demo

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