Onmouseover + onmouseout problems

[Bunny]

Hi,

I got some problems with the onmouseover and onmouseout handlers. I got a div, and when I go over it it changes the CSS and when I go out of it, it changes back. It works fine, but when I add a ul list to the div, when it's 'expanded', and I go over the list, it thinks I go out my div and collapses the menu. But when I don't touch my ul list, it works fine. What's up?


<a onmouseover="TypeMenu(1)" onmouseout="TypeMenu(0)">
<div id="search_where">
<span id="search_where_txt">Video's</span>
</div>
</a>


function TypeMenu(boolean)
{
if(boolean=="1")
{
document.getElementById("search_where").id = "search_where_diag";
document.getElementById("search_where_diag").innerHTML = "<span id='search_where_txt'>Video\'s</span><ul id='search_where_ul'><span id='search_where_span'><a href='javascript:document.getElementById(\'search_where_txt\').innerHTML = \'Afbeeldingen\''<li>Afbeeldingen</li></a><li>Bestanden</li></span></ul>";
}
else if(boolean=="0")
{
document.getElementById("search_where_diag").id = "search_where";
document.getElementById("search_where").innerHTML = "<span id='search_where_txt'>Video\'s</span>";
}
}

CSS isn't needed, i think. And I didn't test the <a> from the ul list, so if that's wrong i'll fix it when this problem is fixed. So, who can help me?

Thanks,

Benjamin :kiss:

[Bunny]

Well, I just found out it is a common problem with Javascript. It's 'bubble' or something. The problem is that it fires the onmouseout event on child. I have been googling for a long time, seen some answers, but I just can't make it work at mine. StopPropagation(), CancelBubble(), I have no idea where to put it and how to use it :(