Просьба помочь со скриптом - всплывающее меню

Здравствуйте. я - абсолютный нуб, поэтому не судите строго за, наверно, глупый вопрос. Вобщем подобрал я на одном сайте выпадающее меню, подсмотрел его код. Очень простой. В виде таблицы, где высовующиеся элементы - это строчки таблицы, которые по умолчанию скрытые, а при клике отображаются. Сам код выглядит так:

<style>
.hide	{display: none}
.show	{display: block}
</style>
<script>
function setTables(el) {
     	var tables=el.parentNode.getElementsByTagName("TABLE");
     	for (var i=0; i<tables.length; i++) {
     		tables[i].className=(tables[i].className=='hide')?'show':'hide'
     	}
     }
</script>

<table><tr><td>
<a href='javascript:;' onClick='setTables(this);' class='mainmenu'>Меню</a>
<table border=0 width=170 class='hide' cellpadding="0" cellspacing="0" align=left > <tr> <td ><a href='1.html' class='menu' >Пункт1</a></td>        </tr></table></td></tr>

Мне были нужны подменю, и добавил еще строчку, и получилось:

<style>
.hide	{display: none}
.show	{display: block}
</style>
<script>
function setTables(el) {
     	var tables=el.parentNode.getElementsByTagName("TABLE");
     	for (var i=0; i<tables.length; i++) {
     		tables[i].className=(tables[i].className=='hide')?'show':'hide'
     	}
     }
</script>

<table><tr><td>
<a href='javascript:;' onClick='setTables(this);' class='mainmenu'>Меню</a>
<table border=0 width=170 class='hide' cellpadding="0" cellspacing="0" align=left > <tr> <td ><a href='javascript:;' onClick='setTables(this);' class='mainmenu'>Пункт1</a><table border=0 width=170 class='hide' cellpadding="0" cellspacing="0" align=left > <tr> <td ><a href='1.html'>Пункт1.1</a></td></tr></table></td></tr></table></td></tr>

Так вот проблема в том, что подменю открывается во всех браузерах только после второго клика. Будто первый раз onClick не срабатывает, или вызывает не ту функцию. Где я мог ошибится в таком простом коде?

Не правильно написал. При вышесказанном раскладе у меня открываются сразу все подменю. А для раскрытия отдельного делал так:

<style>
.hide {display: none}
.hide2 {display: none}
.show {display: block}
</style>
<script>
function setTables(el) {
var tables=el.parentNode.getElementsByTagName("TABLE") ;
for (var i=0; i<tables.length; i++) {
tables[i].className=(tables[i].className=='hide')?'show':'hide'
}
}
</script>
<script>
function setTabless(el) {
var tables=el.parentNode.getElementsByTagName("TABLE") ;
for (var i=0; i<tables.length; i++) {
tables[i].className=(tables[i].className=='hide2')?'show':'hide2'
}
}
</script>

<table><tr><td>
<a href='javascript:;' onClick='setTables(this);' class='mainmenu'>Меню</a>
<table border=0 width=170 class='hide' cellpadding="0" cellspacing="0" align=left > <tr> <td ><a href='javascript:;' onClick='setTabless(this);' class='mainmenu'>Пункт1</a><table border=0 width=170 class='hide2' cellpadding="0" cellspacing="0" align=left > <tr> <td ><a href='1.html'>Пункт1.1</a></td></tr></table></td></tr></table></td></tr>

И вот тогда-то приходится делать лишний клик

[Snipe]

используйте теги для форматирования постов на форуме %(

[SerG]

извините. больше не повторится :rolleyes:

[SerG]

Ну если все-таки у кого-то возникнет какая мысль - пишите. Проблема еще не решена.

так в чем проблема
в том что открывается все
или в том что открывается только первое подменю а подподменю - нет ???

[Zibba]

Я конечно тоже не гуру, но попытаюсь помочь.

Во первых думаю две одинаковых функции - это лишнее, поэтому оставил все го лишь одну .
Во вторых, так и не понял для чего у тега <table> определен сlass='mainmenu' который ни где не описан, поэтому выкинул лишний мусор.
В третьих Вы куда то потеряли закрывающий тег </table> основной таблицы (исправил и этот ляп)

Ну и вот, думаю то что Вам было нужно:

<style>
	.hide {display: none}
	.hide2 {display: none}
	.show {display: block}
</style>
<script>
	function setTables(el) {
		var tables=el.parentNode.getElementsByTagName("TABLE") ;
		for (var i=0; i<tables.length; i++) {
			tables[i].className=(tables[i].className=='hide')?'show':'hide';
		}
	}
</script>
<table><tr>
	<td>
		<a href='javascript:;' onClick='setTables(this);'>Меню</a>
		<table border=0 width=170 class='hide' cellpadding="0" cellspacing="0" align=left><tr>
			<td>
			<a href='javascript:;' onClick='setTables(this);'>Пункт1</a>
			<table border=0 width=170 class='hide2' cellpadding="0" cellspacing="0" align=left>	<tr>
				<td>
				<a href='1.html'>Пункт1.1</a>
				</td></tr>
			</table>
			</td></tr>
		</table>
	</td></tr>
</table>

[SerG]

Потрясно! Все отлично работатет!!! Так и думал, что решение элементарное. Большое Вам спасибо!