Xin giúp về mouserover và mouseout của Javascript.

[php_code]

Số là mình có 1 dàn menu ngang


<div id="main_menu">
<ul>
<li><a href="#" id="about" onmouseover="show_sub_menu(1)" onmouseout="hide_sub_menu(1)">About</a></li>
<li><a href="#" id="what" onmouseover="show_sub_menu(2)" onmouseout="hide_sub_menu(2)">What</a></li>
<li><a href="#" id="why" onmouseover="show_sub_menu(3)" onmouseout="hide_sub_menu(3)">Why</a></li>
<li><a href="#" id="how" onmouseover="show_sub_menu(4)" onmouseout="hide_sub_menu(4)">How</a></li>
<li><a href="#" id="legal" onmouseover="show_sub_menu(5)" onmouseout="hide_sub_menu(5)">Legal</a></li>
</ul>
</div><!-- end main_menu -->


và 1 loạt các menu con tương ứng với menu cha ở trên


<div id="show1" style="display:none;" class="show_sub_menu">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">About Forex</a></li>
<li><a href="#">About Dìn Ký</a></li>
</ul>
</div>
<div id="show2" style="display:none;" class="show_sub_menu">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">About Forex</a></li>
<li><a href="#">About Dìn Ký</a></li>
</ul>
</div>
<div id="show3" style="display:none;" class="show_sub_menu">A || B </div>
<div id="show4" style="display:none;" class="show_sub_menu">A || B </div>
<div id="show5" style="display:none;" class="show_sub_menu">A || B </div>


Mình sử dụng mouseover để khi rê chuột vào About sẽ show các menu con của About, và sử dụng mouseout để ẩn đi menu con khi rê chuột ra khỏi menu cha.


function show_sub_menu(str)
{
document.getElementById('show'+str).style.display= 'block';
}

function hide_sub_menu(str)
{
document.getElementById('show'+str).style.display= 'none';

}


Nhưng vấn đề là mình k thể sử dụng dc menu con vì.....khi vừa rê chuột ra khỏi menu cha là menu con cũng mất luôn rồi (do mouseout) nên post lên đây mong dc các cao thủ help vấn đề này.

[ducuytran]

Bạn nên sử dụng cấu trúc phân cấp của SuckerFish menu, vd:


<ul id="main-menu">
<li class="menu-item">
Category
<ul class="sub-menu">
<li class="sub-menu-item">Sub Category 1</li>
<li class="sub-menu-item">Sub Category 1</li>
</ul>
</li>
<li class="menu-item"></li>
...
</ul>

Thì lúc đó sẽ giải quyết được vấn đề mouseover.