Javascript 如何最好地制作悬停导航栏？

如何制作一个像dabblet这样的导航条，让它落在悬停上

请注意，当您将鼠标悬停在“全部”上时，它似乎是从页面顶部下拉的。我知道可以通过将css位置设置为绝对位置的两个div，使“all”和“content”的位置适当：

<div id="content">-All content that would come with the dropdown here/div>
<div id="all">All</div>

-此处下拉列表/div>附带的所有内容
全部的

---

然后使用jquery附加悬停事件以设置“all”的动画，并使用动画使“all”和“content”css下拉（我有两个更新两个单独dom元素的位置）。是否有更好的方法在dom中构建它，并且可能只使用CSS3来实现这一点，而不是描述的和/或更好的方法来构建dom，这样我就不必同时更新内容的位置和所有内容？

Id肯定不会使用javascript或jQuery来实现这一点，因为这一切都只可能通过CSS3实现

这里是一个例子或检查小提琴：

#naviWrapper{
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
位置：绝对位置；
顶部：-200px；
高度：200px；
左：0px；
右：0px；
背景：#ccc；
}
#导航包装器：悬停{
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
顶部：0px；
}
#导航按钮{
位置：绝对位置；
底部：-60px；
左：50%；
左边距：-50px；
宽度：100px；
高度：60px；
背景：#000；
颜色：#fff；
文本对齐：居中；
}
悬停

---

这是可行的，因为button元素是包装器的子元素，所以悬停naviButton时，它将调用包装器元素上的悬停，该元素通过css样式顶部中给出的查询进行动画处理。

当鼠标悬停“All”按钮以显示面板时，我将使用JQuery，效果为

slideDown

。

#naviWrapper {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    position:absolute;
    top:-200px;
    height:200px;
    left:0px;
    right:0px;
    background:#ccc;
}

#naviWrapper:hover {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    top:0px;
}

#naviButton {
    position:absolute;
    bottom:-60px;
    left:50%;
    margin-left:-50px;
    width:100px;
    height:60px;
    background:#000;
    color:#fff;
    text-align:center;
}


<div id="naviWrapper">

    <div id="naviButton">Hover!</div>

</div>