I was searching across the internet for javascript code snippet to create horizontal menu/submenu and found also but after then I thought why shouldn't I create myself?
then I used this logic, for your ease I have made few lines bold where the calling is made.
please run this code in your browser

CSS:

Code:
  <style type="text/css">
     .top_x_menu
	    {
		  position:absolute;
		  width:700px; height:28px;
		  margin-left:75px; margin-top:120px;
		    
		}
	  .top_x_menu table
	    {
		  width:100%; height:100%;
		} 		
	  .top_x_menu table tr
	    {
		  border:solid 1px black; 
		  
		} 	
	  .top_x_menu table td
	    {
		  border-right:solid 1px #E08721;
		  
		} 
	  .tx_menu_item	
	    {
		   display:block;
		   font-family:verdana;
		   font-size:11px;
		   width:100%; height:100%;
		   text-align:center;		   
		  text-decoration:none;
		  color:#961C13;
		}
  </style>

Javascript:

Code:
   <script language="javascript">		

		function create_sub_menu(rowCount,leftPos,rootmItem,menuContainer)
		{
		    var srcHolder =  document.getElementById(menuContainer);
			var srcTable =  document.createElement("table");		
			var sub_menu_items = new Array(rowCount);
			var smenu_url = new Array(rowCount);
			var tmpRow = null;
			var tmpCell = null;
			
			for(i=0;i<7;i++)
			  {
				 sub_menu_items[i] = document.createElement("a");
				 sub_menu_items[i].style.display = "block";
				 sub_menu_items[i].style.width = "100%";
				 sub_menu_items[i].style.height = "100%";	
				 sub_menu_items[i].style.fontFamily = "verdana";
				 sub_menu_items[i].style.fontSize = "10px";
				 sub_menu_items[i].style.textDecoration="none";
				 sub_menu_items[i].style.color = "black";			
			  }
			if(rootmItem == "aboutus")	
			  {			    
			   
			     smenu_url[0] = "http://gargi_collg/";
				 smenu_url[1] = "http://gargi_collg/";
				 smenu_url[2] = "http://gargi_collg/";
				 smenu_url[3] = "http://gargi_collg/";
				 smenu_url[4] = "http://gargi_collg/";
				 smenu_url[5] = "http://gargi_collg/";
				 smenu_url[6] = "http://gargi_collg/";
				 
				 sub_menu_items[0].innerHTML = "The Society";
				 sub_menu_items[1].innerHTML = "Vision";
				 sub_menu_items[2].innerHTML = "Core Values";
				 sub_menu_items[3].innerHTML = "Mission";
				 sub_menu_items[4].innerHTML = "Chairman's Message";
				 sub_menu_items[5].innerHTML = "Director's Message";
				 sub_menu_items[6].innerHTML = "Mandatory Disclosure";
			  }
			
			if(rootmItem == "faculties")	
			  {
			     smenu_url[0] = "http://gargi_collg/";
				 smenu_url[1] = "http://gargi_collg/";
				 smenu_url[2] = "http://gargi_collg/";				
			  }  
			if(rootmItem == "college")	
			  {
			     smenu_url[0] = "http://gargi_collg/";
				 smenu_url[1] = "http://gargi_collg/";
				 smenu_url[2] = "http://gargi_collg/";
				 smenu_url[3] = "http://gargi_collg/";
				 smenu_url[4] = "http://gargi_collg/";
				 smenu_url[5] = "http://gargi_collg/";				
			  }
			  
			if(IsValidNumber(rowCount) && (srcHolder != null) && (srcHolder.canHaveChildren))
			{
				srcHolder.innerHTML = "";
				srcHolder.style.width = "150px";	
				srcHolder.style.height = 20*rowCount+30;			
				srcHolder.style.position = "absolute";
				srcHolder.style.marginLeft = leftPos;	
				srcHolder.style.marginTop = "147px";
						
				srcTable.style.border = "solid";	
				srcTable.style.borderWidth = "1px";			
				srcTable.style.borderColor = "#EDA44B";
				srcTable.style.backgroundColor = "#E0C2A1";
				srcTable.style.height = "100%";
				srcTable.style.width = "100%";
				srcTable.style.position = "absolute";
				srcTable.style.marginTop = "0px";				
				
				srcHolder.appendChild(srcTable);
				for(i=0; i<rowCount; i++)
				 {
					tmpRow = AppendRow(srcTable)
					for(j=0; j<1; j++)
					{
						tmpCell = AppendCell(tmpRow);																	
					}
					sub_menu_items[i].href = smenu_url[j];	
							
	                    tmpCell.appendChild(sub_menu_items[i]);	
				 }
			    srcTable.onMouseOut = "Del_sub_menu('sub_menus1')"	;
			   	
			}
		}

		function AppendRow(srcTable)
		{
			if(srcTable != null)
			{
				return srcTable.insertRow();
			}
			else
			{
				alert("Error while creating table. Cause: Container Table is null!");
			}
		}

		function AppendCell(srcRow)
		{
			if(srcRow != null)
			{
				return srcRow.insertCell();
			}
			else
			{
				alert("Error while creating table. Cause: Container row is null!");
			}
		}

		function IsValidNumber(ipNum)
		{
			if(isNaN(ipNum))
			{
				alert("Invalid Number!");
				return false;
			}
			else if(ipNum < 1)
			{
				alert("Number should be greater than 0!");
				return false;
			}
			else
			{
			return true;
			}
		}
		
	   function del_sub_menu(menuContainer)
	     {
		    var srcHolder =  document.getElementById(menuContainer);			 
		    	
               while(srcHolder.childNodes.length) 
               srcHolder.removeChild(srcHolder.firstChild);
			  			
		 }	
	</script>

HTML:

Code:
   <body>
   <div class="top_x_menu">       
          <table cellpadding="0" cellspacing="0">
		    <tr>
			 <td>
			   <a class="tx_menu_item" href="index.html" target="_self"><b>Home</b></a>
			 </td>
			 <td>
			    <a class="tx_menu_item" OnMouseOver="create_sub_menu(6,139,'aboutus','sub_menus1')" OnMouseOut="del_sub_menu('sub_menus1')" href="/about_us/aim.html" href="#" target="_self">About Us</a>
			 </td>
			 <td>
			   <a class="tx_menu_item" href="career.html" target="_self">Career</a>
			 </td>
			 <td>
			   <a class="tx_menu_item" href="courses.html" target="_self">Courses</a>
			 </td>
			 <td>
			    <a class="tx_menu_item" href="/faculties/charman_prof.html" target="_self">Faculties</a>
			 </td>
			 <td>
			   <a class="tx_menu_item" href="/college/campus.html" target="_self">College</a>
			 </td>
			 <td>
			    <a class="tx_menu_item" href="downloads.html" target="_self">Get In</a>
			 </td>
			 <td style="border:none;" >
			    <a class="tx_menu_item" href="contact_us.html" target="_self">Contact Us</a>
			 </td>
			</tr>
		  </table>
		</div>
	   <div id="sub_menus1">
		 </div>
		 <div id="sub_menus2">
		 </div>
		 <div id="sub_menus3">
	</div>	
</body>
The problem is, when mouse over occurs every thing goes fine the submenu is created but when I try to move over this submenu to navigate to the target links then it desappear because the mouse switch to another element and rootItem's OnMouseOut event occurs.

I have been trying far a long time to fix this problem but I am still not successful.

hope you help me: