Javascript makes it easy for the popup submenu to disappear when the mouse is moved

  • 2020-03-30 01:09:27
  • OfStack

 
<html> 
<head> 
<style type="text/css"> 
.menu 
{ 
background-color:green; 
width:120; 
height:20; 
color: white; 
text-align: center; 
font-size:9pt; 
font-weight:bolder; 
} 
.submenu 
{ 
position:absolute; 
top:40; 
background-color: 
yellow;width:180; 
font-size:9pt; 
} 
</style> 
</head> 

<body> 
<SCRIPT> 
var cm=null; 
document.onclick = new Function("show(null)") 
function getPos(el,sprop) 
{var iPos = 0 
while (el!=null) 
{iPos+=el["offset" + sprop] 
el = el.offsetParent} 
return iPos} 
function show(el,m) 
{if (m) { m.style.display=''; 
m.style.pixelLeft = getPos(el,"Left") 
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight} 
if ((m!=cm) && (cm)) cm.style.display='none';cm=m} 
</SCRIPT> 

<table border=0> 
<tr> 
<td ID="d1" onmouseover="show(this,ds1);" class="menu"> Magazine technical site </td> 
<td ID="d2" onmouseover="show(this,ds2);" class="menu"> Portal site </td> 
<td ID="d3" onmouseover="show(this,ds3);" class="menu"> Personal collection site </td> 
</tr> 
</table> 

<DIV ID="ds1" CLASS="submenu" STYLE="display:none" onmouseleave="this.style.display='none'"> 
<BR><A HREF="http://www.yesky.com"> chinabyte  Yesky.com</A> 
<BR><A HREF="http://www.cbinews.com"> Computer business information </A> 
<BR><A HREF="http://www.newsoft.com.cn"> Modern electronic </A> 
<BR> 
</DIV> 
<DIV ID="ds2" CLASS="submenu" STYLE="display:none" onmouseleave="this.style.display='none'"> 
<BR><A HREF="http://www.sina.com.cn"> sina  Sina</A> 
<BR><A HREF="http://www.sohu.com.cn"> sohu  Sohu</A> 
<BR><A HREF="http://www.163.com"> netease  Netease</A> 
<BR> 
</DIV> 
<DIV ID="ds3" CLASS="submenu" STYLE="display:none" onmouseleave="this.style.display='none'"> 
<BR><A HREF="http://haoel.yeah.net"> Mouse network programming station </A> 
<BR><A HREF="http://www.5460.net"> Chinese student directory </A> 
<BR><A HREF="http://www.csdn.net"> China software development network </A> 
<BR> 
</DIV> 
</body> 
</html> 

Related articles: