デモ1
デモ：アコーディオン応用

デモ1のソース
HTML
<ul id=”nav”>
<li><a href=”#” mce_href=”#”>nav_01</a>
<ul>
<li><a href=”#” mce_href=”#”>nav_01_01</a></li>
<li><a href=”#” mce_href=”#”>nav_01_02</a></li>
<li><a href=”#” mce_href=”#”>nav_01_03</a></li>
<li><a href=”#” mce_href=”#”>nav_01_04</a></li>
</ul>
</li>
<li><a href=”#” mce_href=”#”>nav_02</a>
<ul>
<li><a href=”#” mce_href=”#”>nav_02_01</a></li>
<li><a href=”#” mce_href=”#”>nav_02_02</a></li>
<li><a href=”#” mce_href=”#”>nav_02_03</a></li>
<li><a href=”#” mce_href=”#”>nav_02_04</a></li>
<li><a href=”#” mce_href=”#”>nav_02_05</a></li>
<li><a href=”#” mce_href=”#”>nav_02_06</a></li>
<li><a href=”#” mce_href=”#”>nav_02_07</a></li>
<li><a href=”#” mce_href=”#”>nav_02_08</a></li>
</ul>
</li>
<li><a href=”#” mce_href=”#”>nav_03</a>
<ul>
<li><a href=”#” mce_href=”#”>nav_03_01</a></li>
<li><a href=”#” mce_href=”#”>nav_03_02</a></li>
</ul>
</li>
<li><a href=”#” mce_href=”#”>nav_04</a>
<ul>
<li><a href=”#” mce_href=”#”>nav_04_01</a></li>
</ul>
</li>
</ul>
<hr />

CSS
#nav li
{
width:200px;
background:#DDDDDD;
float:left;
}
#nav li > ul
{
display:none;
}
#nav li:hover > ul
{
display:block;
}
#nav li ul li
{
width:185px;
padding:0px 0px 0px 15px;
display:block;
}
#nav li ul li:hover
{
background:#AAAAAA;
display:block;
}

デモ：アコーディオン応用
HTML
<ul id=”nav”>
<li class=”nav_01″><a href=”#”>nav_01</a>
<ul>
<li><a href=”#”>nav_01_01</a></li>
<li><a href=”#”>nav_01_02</a></li>
<li><a href=”#”>nav_01_03</a></li>
<li><a href=”#”>nav_01_04</a></li>
</ul>
</li>
<li class=”nav_02″><a href=”#”>nav_02</a>
<ul>
<li><a href=”#”>nav_02_01</a></li>
<li><a href=”#”>nav_02_02</a></li>
<li><a href=”#”>nav_02_03</a></li>
<li><a href=”#”>nav_02_04</a></li>
<li><a href=”#”>nav_02_05</a></li>
<li><a href=”#”>nav_02_06</a></li>
<li><a href=”#”>nav_02_07</a></li>
<li><a href=”#”>nav_02_08</a></li>
</ul>
</li>
<li class=”nav_03″><a href=”#”>nav_03</a>
<ul>
<li><a href=”#”>nav_03_01</a></li>
<li><a href=”#”>nav_03_02</a></li>
</ul>
</li>
<li class=”nav_04″><a href=”#”>nav_04</a>
<ul>
<li><a href=”#”>nav_04_01</a></li>
</ul>
</li>
</ul>
<hr />

CSS
#nav li.nav_01 ,
#nav li.nav_02 ,
#nav li.nav_03 ,
#nav li.nav_04
{
width:200px;
height:15px;
overflow:hidden;
background:#DDDDDD;
float:left;
}
#nav li.nav_01:hover
{
height:80px;
}
#nav li.nav_02:hover
{
height:145px;
}
#nav li.nav_03:hover
{
height:50px;
}
#nav li.nav_04:hover
{
height:35px;
}
#nav li.nav_01 li ,
#nav li.nav_02 li ,
#nav li.nav_03 li ,
#nav li.nav_04 li
{
padding:0px 0px 0px 15px;
}
#nav li.nav_01 li:hover ,
#nav li.nav_02 li:hover ,
#nav li.nav_03 li:hover ,
#nav li.nav_04 li:hover
{
background:#AAAAAA;
}

デモの2番目の方は使い道は少ないと思います。
また、文字サイズの拡大に対応してません・・・。

また日本語のみですが横タイプはタイトルを縦書きにしてみました。

デモ：アコーディオン横タイプ
デモ：アコーディオン縦タイプ

送ってみました。

何故CSSが効かないのかと。

今書いていて気付いた外部っていうのを忘れてました…。

質問内容は先ほど書いた内容でauとソフトバンクは普通に見れるのに、何故ですかと。

昨日送って今日に普通に返ってきましたi-cssと作ろうi-modeコンテンツのURLの事が…。

それを聞きたかったわけではなかったんだけど、さっき気付いた事が抜けてたから普通ですね。

前にも色々な企業(業種色々)に変な内容のメールを送ったことがあったけど、どの企業もちゃんと返答が返ってきたので嬉しかったです。

その内容は別のところで書きたいと思います。

各ブラウザが仕様に対応しているなか、

現状あるブラウザの中で共通で使えるものが標準なのではないかっと…