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

Question

如何制作像dabblet这样的导航栏，将其悬停下来？

http://sampsonblog.com/289/of-dice-dabblet-and-css

请注意，当您将鼠标悬停在“全部”上时，它似乎是从页面顶部下拉的。 我知道可以通过将两个div的css位置设为绝对，从而使“所有”和“内容”正确定位来实现：

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

然后使用jquery将悬停事件附加到“ all”动画上，并使用动画使“ all”和“ content” css下拉（我有两个更新了两个单独的dom元素的位置）。 是否有某种更好的方法来在dom中进行结构化，并且有可能仅使用CSS3来完成上述操作，和/或是否有一种更好的方法来构建dom以使我不必同时更新内容和所有内容的位置？

Answer 1

id肯定不会使用javascript或jQuery，因为只有CSS3才有可能

这是一个例子或查看小提琴http://jsfiddle.net/mpaas/ ：

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

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