特定のdiv範囲全てをリンクとして機能させたい

Question

プルダウンをJavaScriptで実装しているのですが、　div内のpタグにしかリンクを指定していないため、文字をクリックしないとプルダウンが開きません。そのため、cssをいじっているdivの範囲全てをリンクとして機能させたいと思っています。

例：
| テスト1 |
| テスト2 |
| テスト3 |

上記のようにメニューが並んでいた場合、テスト1,2,3それぞれの文字をクリックしなければプルダウンが開きません。
横の空白部分をクリックしてもプルダウンが開くようにしたいです。

プルダウンは以下のように実装しています。

<div id="test_select">
   <p><a href="javaScript:pullDown('id1')">テスト1</a></p>
</div>

function pullDown(id) {
	obj = document.getElementById(id);
	if(obj.style.display == "none") {
		obj.style.display = "block";
	} else {
		obj.style.display = "none";
	}
}

#test_select {
padding: 0.5px 1px;
margin: 0;
color: #2c2c2f;
background: #ffffc8;
}

#test_select p {
margin: 0;
padding: 0;
font-size: 1.2em;
}

どうにもうまいやり方が思いつかず...
よろしくお願いします。

Answer 1

単純にやろうとすると

#test_select p a {
  display: block;
}

でしょうか。

Comments

[science_mac]

こんな単純なことで解決できたんですね...
なぜそうなるかも勉強していきます

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