いつもお世話になっております。

Reachと申します。
--------------------------------
EC-CUBEバージョン2.12.6
PHPバージョンPHP 5.4.17
DBバージョンMySQL 5.5.28-log
サイト名:http://ed-en-shop.com/
--------------------------------

この度、EC-CUBEのカテゴリーをアコーディオン化しておりますが、現在ですと、しっかりjavaは起動していますが、横並びになっており、ブロックも崩れてしまっている状態です。

原因がどこのcssなのかphpなのかが分からず困っております。

作業の流れとしては以下になります。

どうぞわかる方いらっしゃいましたらご教授頂きますようお願い申し上げます。

参考サイト
http://daihachi.sub.jp/archives/1286

?/html/js/に以下を挿入

menu.js

?/html/user_data/packages/default/cssに以下を挿入

style.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");

?/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 表示乱れ防止 */
}
を削除


参考サイト
http://daihachi.sub.jp/archives/1286


ご確認頂き有難う御座いました。
どうぞ宜しくお願い申し上げます。

タイトルは、「アコーディオン化」ですが、
参考にされたサイトは、「プルダウン化」になってますよ。

sumida様

お世話になっております。
Reachと申します。

この度はご返答頂き有難う御座います。

申し訳御座いません。
私の書きまちがいをしていました。

すぐに修正させて頂きます。

当てずっぽうです。

CSSファイルの
floatが関係しているような。

sumida様

ご返答頂き有難う御座います。

現在、CSSを少しみており、とりあえず縦に並びましたが、マウスオンした時に、下位カテゴリが親カテゴリと被ってしまい、見る事が出来ません。

わかりましたらどうぞご教授いただきますよお願い申し上げます。

プルダウンカテゴリーメニュCSS部分

body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}

#nav a{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}

#nav a:hover{
background-color:#fff;
color:#333;
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:1.5em;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

floatがあった場合、すべてのliタグで有効（横並び）になり
floatがない場合、すべてのliタグで縦並びになったと思うます。
ということで、
下層のliタグにidをつけ、そのidに対しCSSを定義（float）するとか。

とりあえず、下層のliタグに直接、CSSを付加して動作確認をしてみては。

sumida様

ご返答有難う御座います。

横並びになったのは、以下をleft⇒centerにした為でした。
---------------
#nav li{
float:center;
position:relative;
}
---------------

実際に、liタグにcssを付加するというのはどういった感じになればよいのでしょうか。

私の中の認識ですと、floatタグがない所にfloatを以下のようにつけるという事と思い、以下のようにしてみましたが特にかわりはありませんでした。

現在----------------
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
--------------------

float付加-----------
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
float:center;
}
--------------------

知識不足で申し訳御座いません。
ご教授頂ければ幸いです。

どうぞ宜しくお願い致します。

とりあえず、どう既述すれば良いかを確認するために、
htmlのulタグやliタグに「style属性をつけてみる」とういうことです。
例：
<li style="float:left">

これで、希望の表示ができれば、CSSに反映すれば、良いかなと。

sumida様

ご返答いただきまして誠に有難う御座います。
また、ご返信が遅れ申し訳御座いませんでした。

実際に試してみて、様子を見てみたいと思います。

CSS関係の知識がないことでご迷惑をおかけし申し訳御座いませんでした。

今後ともどうぞ宜しくお願い致します。