帶轉換的下拉菜單

Question

經過了很長時間的JavaScript編碼，我想嘗試做一個漂亮的網站沒有任何 JavaScript（當然沒有jQuery）。我想要做一個下拉菜單，像這個網站這樣的標籤：dropdown tabs。但這是一個JavaScript。我這樣做了：http://jsfiddle.net/jHeRm/。但是當我添加過渡時，我遇到了一個問題：過渡是從一個點到另一個點的，我不知道沒有計算的開始點（高度li * li的數量）。

如何以任何方式做這個轉換，但沒有jQuery，JavaScript，PHP，ID和類？

編輯：我想到了一個方法通過使從bottom:0px過渡到top:21px但過渡總是開始從top:0px到top:21px

Answer 1

你可以使用CSS和動畫嵌套ul的高度來完成它：

http://jsfiddle.net/jHeRm/2/

---

下面是一個更新版本使用負邊距：

http://jsfiddle.net/jHeRm/4/