Всплывающее меню гиперссылок

[alex81]

Здравствуйте. Этот кусок кода взят из книги JavaScript.Просто как 2х2. Люди подскажите что здесь не так, почему не работает (Отрывок из книги: "..Когда пользователь подводит указатель мыши к заголовку категории, открывается вложенный список гиперссылок, относящийся к этой категоии...Если пользователь перемещает указатель на другой заголовок категории, список ссылок предыдущей категории сворачивается, а под заголовком категории возникает новый список...". Только начал изучать JavaScript как попал в ступор блин.

Спасибо.

<FORM><DIV STYLE='color: blue; text-decoration: underline'> 
 <P ONMOUSEOVER=f1()>Группа 1</P>
 <UL ID='group_1' NAME='group_1'></UL> 
 <P ONMOUSEOVER=f2()>Группа 2</P>
 <UL ID='group_2' NAME='group_2'></UL>
 <P ONMOUSEOVER=f3()>Группа 3</P>
 <UL ID='group_3' NAME='group_3'></UL>
</DIV></FORM>

<SCRIPT>
 function f1(){
 window.group_2.innerHTML=""
 window.group_3.innerHTML=""
 window.group_1.innerHTML="<LI ONMOUSEOVER=on_select
 ('art1.htm')>Статья 1</LI><LI ONMOUSEOVER=on_select
 ('art2.htm')>Статья 2</LI><LI ONMOUSEOVER=on_select
 ('art3.htm')>Статья 3</LI>"
};

 function f2(){
 window.group_1.innerHTML=""
 window.group_3.innerHTML=""
 window.group_2.innerHTML="<LI ONMOUSEOVER=on_select
 ('art4.htm')>Статья 4</LI><LI ONMOUSEOVER=on_select
 ('art5.htm')>Статья 5</LI>"
};

 function f3(){
 window.group_1.innerHTML=""
 window.group_2.innerHTML=""
 window.group_3.innerHTML="<LI ONMOUSEOVER=on_select
 ('art5.htm')>Статья 6</LI>"
};

 function on_select(name){
 top.main.location.replace(name); 
};
</SCRIPT>