如何最好地制作懸停導航欄？

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樣式頂部給出的查詢進行動畫處理。