This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu:

Flickrで使われているあのクールなドロップダウンメニューを実装してみよう！
次のようなクールなドロップダウンメニューを実装してみましょう。

紹介元で、HTMLと画像のサンプルが配布されています。



実装自体は次のように関数が定義されていて、

<script language="javascript">
function showMenu(id_menu){
    var my_menu = document.getElementById(id_menu);
    if(my_menu.style.display=="none" || my_menu.style.display==""){
        my_menu.style.display="block";
    } else {
        my_menu.style.display="none";
    }
}
function swapImage(idStatus){
    if(idStatus==0){
        document.arrow_profile.src ="arrow_hover.png";
    } else if(idStatus==1){
        document.arrow_profile.src ="arrow_select.png";
    } else if(idStatus==2){
        document.arrow_profile.src ="arrow.png";
   }
}
</script>

ドロップダウン部分のonclick,onmouseup,onmouseover,onmouseoutにて呼び出しているようです。
JSとHTMLの分離が行われていないのですが、element.onclick = function() {} などとして設定してHTMLとJSを分離してもよいでしょう。

関連エントリ

• CSSでdigg風のナビゲーションを実装サンプル
• 使えるCSSメニューいろいろ