プルダウンjQueryの設置

ダウンロードは以下の記事に行き
JQueryで簡単に作るドロップダウンメニューいろいろ | DesignWalker

以下の項目よりダウンロードします。
Create a multilevel Dropdown menu with CSS and improve it via jQuery

設置はいつものように、しましょう。
menu.jsファイルは/html/js/へ。
style.cssファイルは/html/user_data/packages/default/cssへ。

/data/Smarty/templates/default/site_frame.tpl　に以下を追加。

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/menu.js"></script>

/html/user_data/packages/default/css/import.css　に以下を追加。

@import url("./style.css");

※場合によっては、このファイル名が使われている場合があるので、応じて名前を変えましょう。

tplファイルの変更

それでは、テンプレートファイルを変更して、プルダウン化しましょう。
/data/Smarty/templates/default/frontparts/bloc/category.tpl
以下に全書き換え。

<div class="bloc_outer">
    <div id="category_area">
        <div class="bloc_body">
            <h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリー" /></h2>

            <!--{strip}-->
		<ul id="nav">
                    <!--{assign var=preLev value=1}-->
                    <!--{assign var=firstdone value=0}-->
                    <!--{section name=cnt loop=$arrTree}-->
                        <!--{* 表示フラグがTRUEなら表示 *}-->
                        <!--{if $arrTree[cnt].display == 1|| $arrTree[cnt].level <=2}-->
                            <!--{assign var=level value=`$arrTree[cnt].level`}-->
                            <!--{assign var=levdiff value=`$level-$preLev`}-->
                                <!--{if $levdiff > 0}-->
                                    <ul>
                                <!--{elseif $levdiff == 0 && $firstdone == 1}-->
                                    </li>
                                <!--{elseif $levdiff < 0}-->
                                    <!--{section name=d loop=`$levdiff*-1`}-->
                                            </li>
                                        </ul>
                                    <!--{/section}-->
                                    </li>
                                <!--{/if}-->
                            <li class="level<!--{$level}--> <!--{if $levdiff > 0}-->first<!--{/if}-->">
                                    <a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|h}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a>
                            <!--{if $firstdone == 0}--><!--{assign var=firstdone value=1}--><!--{/if}-->
                            <!--{assign var=preLev value=`$level`}-->
                        <!--{/if}-->
                        <!--{* セクションの最後に閉じタグを追加 *}-->
                        <!--{if $smarty.section.cnt.last}-->
                            <!--{if $preLev-1 > 0}-->
                                <!--{section name=d loop=`$preLev-1`}-->
                                    </li>
                                </ul>
                                <!--{/section}-->
                                </li>
                            <!--{else}-->
                                </li>
                            <!--{/if}-->
                        <!--{/if}-->
                    <!--{/section}-->
       </ul>
            <!--{/strip}-->

        </div>
    </div>
</div>

一箇所だけ修正が。
/html/user_data/packages/default/css/bloc.css
38行目を削除でも、コメントアウトでも。

.side_column {
//    overflow-x: hidden; /* IE6 表示乱れ防止 */
}

あとはCSSでお好みに形を整えましょう。

階層を限定して表示したい人は以下。

<!--{if $arrTree[cnt].display == 1|| $arrTree[cnt].level <=2}-->

上記の行の<=2の数字を変えてみましょう。
数字が2であれば、2階層目まで表示するという事です。

以上です。
以前は、死ぬほど難しそうで手を出さなかったのですが、やったらやったで、あっけなく。
そんなものなんですよね。

このカスタマイズはVer.2.12でも利用できます。

追記：CSS

質問がありまして、ちょっと混乱してしまったので、自分用としてもCSSを追記しました。
(2013/10/05)

追加で読み込ませた/html/user_data/packages/default/css/import.cssを以下のCSSですべて上書き

#category_area {
    background-color: #FFFFFF;
    height: auto;
}
#nav, #nav ul {
    line-height: 1.8em;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav a {
    display: block;
    font-size: 13px;
    padding: 2px 2px 1px 5px;
    position: relative;
    text-decoration: none;
}
#nav a:hover {
    color: #E62E71;
    position: relative;
    text-decoration: none;
}
#nav li:hover {
    background-color: #E4E4E4;
    overflow: visible;
    position: relative;
}
#nav ul li a:hover {
    color: #E62E71;
    position: relative;
    text-decoration: none;
}
#nav li {
    background-color: #FFFFFF;
    overflow: hidden;
    padding: 3px 0 4px 7px;
    position: relative;
}
#nav li.level1 {
    background: url("../img/icon/cate_arrow.gif") no-repeat scroll 3px 12px rgba(0, 0, 0, 0);
}
#nav li.level1 a {
}
#nav ul {
    background-color: #FFFFF0;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 0;
    left: 100%;
    margin-top: -2px;
    position: absolute;
    top: 0;
    width: 200px;
    z-index: 9999;
}
#nav ul li {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 1px;
}
#nav ul li.first {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 1px 0 0;
}
#nav ul li {
    background: none repeat scroll 0 0 #FFFFF0;
    padding-bottom: 4px;
    padding-left: 13px;
}
#nav ul ul {
    left: 100%;
    top: 0;
    width: 180px;
}
#nav ul li.level2 a {
    background-image: none;
    font-family: Arial,sans-serif;
    font-weight: normal;
    line-height: 23px;
    padding-left: 5px;
}
#nav li ul ul {
    left: 100%;
    top: 0;
}
.arrow_top {
    background: url("../img/icon/arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 10px;
    position: absolute;
    right: 5px;
    top: 7px;
    width: 10px;
}
.arrow {
    background: url("../img/icon/arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 15px;
    left: 10px;
    position: absolute;
    top: 7px;
    width: 10px;
}
#nav li.cate_page {
    border-bottom: 1px dotted #CCCCCC;
    padding: 0 10px 0 0;
    text-align: center;
}
#nav li.cate_page a {
    color: #E62E71;
    font-size: 13px;
}

さらに、/html/user_data/packages/default/css/block.cssの以下の部分を削除

.side_column {
    overflow-x: hidden;
}

これで最低限の表示になるはずです。
整形はご自分のお好みでどうぞ。