Navigation menu with javascript & jquery

JavaScript
1

html menu div

<div class="menu-item"  id="home">
<a href="#">Home</a>
</div>

<div class="menu-item" onMouseOver="showasia()" id="Asia">
<a href="#">Asia</a>
</div>
[U]hmtl submenu div[/U]
<div class="common-sub-menu" onMouseOut="hide('sub-Asia')" onMouseOver="show('sub-Asia')"
        id="sub-Asia" style="display:none;position:absolute;">
<ul>
            	    <li><a href="#">Bangladesh</a></li>
            	    <li><a href="#">China</a></li>
            	    <li><a href="#">Denpasar Bali</a></li>
            	    <li><a href="#">Hong Kong</a></li>
            	    <li><a href="#">India</a></li>
</ul>
</div>

javascript & jquery

function showasia(){
	document.getElementById('sub-Asia').style.display ="";
	//document.getElementById('Asia').style.backgroundColor= "rgb(118,44,95)";
	//document.getElementById('Asia').style.color="white";
		
	//hider rest of submenus
	document.getElementById('sub-Home').style.display ="none";
	
	//hiding of menus 
	document.getElementById('Home').style.backgroundColor= "";
	document.getElementById('Home').style.color="";
}
function show(x){
	document.getElementById(x).style.display ="block";
}
function hide(x){
document.getElementById(x).style.display = "none";
}

problem
hover on sub menu it doesn’t highlight the parent menu …

2

Are you saying the menu doesn’t hide when you onmouseout?

3

problem area :
when we hover the submenu so parent menu should be displayed

4