Javascript-форум - Событие "наведение курсора мыши на элемент"

Здравствуйте, уважаемые программисты!

Ближе к делу:
У меня есть список UL состоящий из одного Li. В Li содержится ссылка а. Ниже всего этого находится таблица.
Задумка такова... когда навожу курсор мыши на Li, то таблица увеличивает свою высоту. Проблема в том, что когда перехожу на ссылку a, то снова начинается выполнение обработчика события. Мне надо, чтобы обработчик события не выполнялся снова, когда я перемещаю курсор на ссылку. Т.е. мне нужно чтобы на событие не влияло перемещение курсора на ссылку.

<html> 
<head>  
<style> 
ul.menu { 
    list-style:none; 
    display:block; 
    background-color:blue; 
    width:500px;     
} 
ul.menu li {     
    background-color:#eeffcc;         
    border:1px solid; 
    width:200px;     
    height:50px; 
    align:center; 
    margin-top:40px; 
} 
ul.menu li a { 
     
    margin-left:10px; 
    padding:0px;     
    border-style:solid; 
    border-width:1px; 
    border-color:black; 
    background-color:blue; 
    color:white; 
} 
</style> 
</head>  
<body>  

<ul id="menu" class="menu"> 
  <li><a href="#">menu 1</a></li>   
</ul>  

<table border=1> 
  <tr> 
    <td>&nbsp;</td></tr> 
</table>

<script type="text/javascript"> 
var In; 
function func1() 
{ 
    var tab = document.getElementsByTagName('table')[0]; 
    tab.style.height = (parseInt(tab.style.height) + 2) + "px"; 
    if (parseInt(tab.style.height) >= 200) { 
        tab.style.height = "200px"; 
        clearInterval(In); 
    } 
} 
function func()  
{     
    var tab = document.getElementsByTagName('table')[0]; 
    tab.style.height = "10px";   
    In = setInterval("func1()", 10); 
} 
var li = document.getElementById('menu').getElementsByTagName('li')[0]; 
li.onmouseover = new Function("func();"); 
</script>

</body>  
</html>

<!DOCTYPE html> <html> <head>  <style type="text/css"> ul.menu { list-style:none; display:block; background-color:blue; width:500px; } ul.menu li { background-color:#eeffcc; border:1px solid; width:200px; height:50px; align:center; margin-top:40px; } ul.menu li a { margin-left:10px; padding:0px; border-style:solid; border-width:1px; border-color:black; background-color:blue; color:white; } </style> <script type="text/javascript"> </script> </head> <body> <ul id="menu" class="menu"> <li><a href="#">menu 1</a></li> </ul> <table border=1> <tr> <td> </td></tr> </table> <script type="text/javascript"> var In; function func1() { var tab = document.getElementsByTagName('table')[0]; tab.style.height = (parseInt(tab.style.height) + 2) + "px"; if (parseInt(tab.style.height) >= 200) { tab.style.height = "200px"; clearInterval(In); } } function func(e) { e = e || window.event var o=e.target||e.srcElement if (o.tagName=='A') return var tab = document.getElementsByTagName('table')[0]; tab.style.height = "10px"; In = setInterval("func1()", 10); } var li = document.getElementById('menu').getElementsByTagName('li')[0]; li.onmouseover = function(e){func(e)}; </script> </body> </html>