プルダウンのメニュー表示について

質問

JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。

○メニュー1
――――――――――――――――――
○メニュー2
――――――――――――――――――

上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。

○メニュー1
　●メニュー1-1　　●メニュー1-2
　●メニュー1-3　　●メニュー1-4
――――――――――――――――――
○メニュー2
――――――――――――――――――

ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。
こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？
何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？

以下がコードの一部です。

[html]
<div class="tree">
　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a>
　　<div class="tree_sub">
　　　　<ul>
　　　　　　<li class="left">●メニュー1-1</li>
　　　　　　<li>●メニュー1-2</li>
　　　　</ul>
　　　　<ul>
　　　　　　<li class="left">●メニュー1-3</li>
　　　　　　<li>●メニュー1-4</li>
　　　　</ul>
　　</div>
</div>
<div class="tree">
　　<a href="#">○メニュー2</a>
</div>

[css]
div.tree {
　　border-bottom:1px solid #000000;
　　width:365px;
}

div.tree_sub ul li {
　　float:left;
}

div.tree_sub ul li.left {
　　width:50%;
}

回答No.2

Kensyusei · ベストアンサー

No.1の補足と併せてみてみると、質問文にあるコードが一部誤っているように見受けられます。

誤:<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a>
正:<a href="javascript:void(0)" id="test_01" onclick="treeOpen(this);">○メニュー1</a>

上記を修正したところ、スクリプトエラーも発生せず上手くいきました。
ちなみに私の環境は

WindowsXP
IE8

です。

お礼

ご回答ありがとうございます。
おっしゃる通り、コードに間違いがあったための動きでした。
ご指摘いただいた箇所を修正したところ、望む動作が得られました。

ありがとうございました。

回答No.1

Kensyusei

まずは実行環境(OS, ブラウザとそのバージョン)とJavaScriptのコードを提示して頂けると回答を得られやすくなると思います。

補足

ご回答ありがとうございます。

実行環境は下記の通りです。
WinXP、FireFox3.6、IE6,7,8

[JavaScript]

<script type="text/javascript">
<!--
　　if (document.getElementById) {
　　　　document.write('<style type="text/css">.tree_sub {display:none;}<'+'/style>');
　　}

　　function treeOpen(element) {
　　　　var tree = element.parentNode.getElementsByTagName("div")[0];

　　　　if (tree.style.display == "block") {
　　　　　　tree.style.display = "none";
　　　　} else {
　　　　　　tree.style.display = "block";
　　　　}
　　}
-->
</script>

以上、宜しくお願い致します。