JavaScriptによる疑似プルダウンメニュー

他の方が作成したサイトの管理を引き継ぎ更新していますが、サイドメニューに使用されているJavaScriptがわかりません。
現在のサイドメニューは、以下のようになっています。

●米
●果物
　○いちご　←初期状態は”display: none”、「果物」クリックで展開
●野菜
　○トマト　←初期状態は”display: none”、「野菜」クリックで展開
●味噌

この小要素を、以下のように増やしたいのです。

●果物
　○いちご
　○りんご
　以下、数は可変

現在の該当部分のソースは、

【HTML】
<ul id="menu">
<li><a href="kome.html">米</a></li>
<li><a href="#" onclick="kudamonoshow();">果物</a></li>
　<li id="line1" style="display: none;"><a href="kudamono01.html">　いちご</a></li>
<li><a href="#" onclick="yasaishow();">野菜</a></li>
　<li id="line2" style="display: none;"><a href="yasai01.html">　トマト</a></li>
<li><a href="miso.html">味噌</a></li>
</ul>

【JS】
function kudamonoshow()
{
if (document.getElementById('line1').style.display == 'none')
document.getElementById('line1').style.display='block';
else
document.getElementById('line1').style.display='none';
}

function yasaishow()
{
if (document.getElementById('line2').style.display == 'none')
document.getElementById('line2').style.display='block';
else
document.getElementById('line2').style.display='none';
}

このソースで何が起きているかは理解しましたが、項目の増やし方が分かりません。
IDはページに一つということなので、試しにHTMLを

<li><a href="#" onclick="kudamonoshow();">果物</a></li>
<div id="line1" style="display: none;">
　<li><a href="kudamono01.html">　いちご</a></li>
　<li><a href="kudamono02.html">　りんご</a></li>
</div>

と、隠したい部分に強引にdivを使いIDを指定したところ、FireFox（Win&Mac）およびSafari（Mac）では正常に動作しますがIE7では動作せず、常に全てのリストが表示されている状態になり、レイアウトも崩れてしまいます。
（IE6は現在手元にありません）

IEでも動作させるにはどうしたらいいのでしょうか？
リストタグを使わない疑似プルダウンのソースは見つけましたが、このサイトでは他にもプログラムが色々動いているので、できれば変更は最小限にしたいと考えています。
足りない情報がありましたら追加します。よろしくお願いします。

No.1 ベストアンサー 回答者： SAYKA 回答日時： 2008/12/19 14:59

divじゃなくspanでやったらどんなかんじ？

IE7でも理論的には合っているみたいだけど何か記述間違えしてたりしないかな？
それと、CSS上でline1の位置調整とかがどうなってるか見てみた方が良いかも。

この回答へのお礼

早速のご回答ありがとうございます！
divをspanに変えてみたところ、正常に表示されるようになりました。
spanだと引っかからない記述ミス等が他の場所にあるのかもしれません。
なぜdivだと動作しないのかは分かりませんが、今後の課題にしたいと思います。
本当に助かりました。ありがとうございました！

お礼日時：2008/12/19 15:24