http://www.cssplay.co.uk/menus/concertina.html

アコーディオン風に見えるだけで、CSSを使ったよく目にするロールオーバー処理です。

通常はブラウザの見えない領域(-9999px)に配置しておき、対応するエリアがマウスオーバーされたときに、見える領域(0px)に移動するといった処理です。

少し解説しますと、

１．まずベースとして１～７までの縦長の短冊上の画像(レイヤ)があります。

　　<ul id="concertina">　の中の　<li class="top one">　の中の　<a class="main" href="#nogo1"></a>　だと思います。

２．この１をマウスオーバして表れるのが下記のレイヤです。(164～174行目)

　　通常は横位置(left)を「-9999px」に設定しています。(71行目)

<div>

<h4>The Concertina Corporation Inc.</h4>

<ul>

<li><a href="#nogo1a">Who we are</a></li>

<li><a href="#nogo1b">What we do</a></li>

<li><a href="#nogo1c">Where to find us</a></li>

<li><a href="#nogo1d">How to contact us</a></li>

<li><a href="#nogo1e">Why you should use us</a></li>

</ul>

<p>This is the menu most requested by visitors to CSSplay. It has been a little while coming but better late than never.</p>

</div>

３．この１がマウスオーバーされる(86行目の「:hover」が肝です)と横位置を0に設定し、表れます。

あまりわかりやすくない説明ですね・・・すみません。