トランジション付きのドロップダウンメニュー

Question

長い時間をJavaScriptでコーディングした後、のいずれかの JavaScriptなしで（しかもjQueryなし）美しいウェブサイトを試してみたかったのです。私はこのウェブサイトのようなタブを持つドロップダウンメニューをしたかった：dropdown tabs。しかし、これはjavascriptにあります。私はそれをした：http://jsfiddle.net/jHeRm/。しかし、私がトランジションを追加したとき、私は問題がありました：トランジションはあるポイントから別のものへと移行しており、計算なしでは始点を知ることができません（高さはli *数字はli）。

jQuery、javascript、php、ID、およびクラスを使用しないでどのようにこの移行を行うことができますか？

EDIT：あなたはCSSを使用して、ネストされたulの高さをアニメーション化でき、私はbottom:0pxからtop:21pxへの移行を行うことによってそれを行うための方法を考えますが、遷移は常にtop:0pxからtop:21px

Answer 1

に起動します。以下は

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

---

更新版です負のマージンを使用して：

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