这里有这类的JAVASCRIPT
然后用DIV+CSS做就可了
2007-07-04 19:27
2007-07-05 09:55
2007-07-05 10:20
<HTML>
<SCRIPT LANGUAGE="JavaScript" >
var IsDroped =false;
function mouseout()
{
window.event.srcElement.style.color = 'white';//鼠标移开时置为白色
}
function mouseover()
{
window.event.srcElement.style.color = 'red';//鼠标进入时置为红色//鼠标进入时置为
红色
}
function doMenu(MenuID)
{
var CurMenu = document.all(MenuID);
//为避免闪烁,如果下拉菜单已经显示则不重画.
if (IsDroped==true)
{
window.event.cancelBubble = true;
return false;
}
window.event.cancelBubble = true;
TempMenu = CurMenu;
//计算下拉菜单的位置
x = window.event.srcElement.offsetLeft +
window.event.srcElement.offsetParent.offsetLeft;
x2 = x + window.event.srcElement.offsetWidth;
y = pad.offsetHeight;
CurMenu.style.top = y;
CurMenu.style.left = x;
CurMenu.style.clip = "rect(0 0 0 0)";
CurMenu.style.display = "block";
//延时2毫秒后再显示菜单,保证ToolbarMenu.offsetHeight有值,避免从主菜单移向下拉菜
单时下拉菜单消失.
window.setTimeout("showMenu()", 2);
return true;
}
function showMenu()
{
y2 = y + TempMenu.offsetHeight;
TempMenu.style.clip = "rect(auto auto auto auto)";
IsDroped =true;//下拉菜单已经显示
}
function hideMenu()
{
//如果在下拉菜单的范围之内移动则不隐藏.
cY = event.clientY + document.body.scrollTop;
if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 ||
cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10)
{ window.event.cancelBubble = true; return;}
//隐藏
TempMenu.style.display = "none";
window.event.cancelBubble = true;
IsDroped =false;
}
</SCRIPT>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<DIV ID='menu' STYLE='position:absolute;background-
color:white;width:100%;top:0;left:0;'>
<DIV ID='pad' STYLE='position:relative;height:20;width:100%;font:bold 11pt 宋
体;background-color:#007FFF;color:white;'>
<A TARGET='_top' TITLE='' ID='pad1' onmouseout="mouseout(); hideMenu();"
onmouseover="mouseover(); doMenu('idpad1');">菜单项一</A>
<SPAN style="color:white"></SPAN>
<A TARGET='_top' TITLE='' ID='pad2' onmouseout="mouseout(); hideMenu();"
onmouseover="mouseover(); doMenu('idpad2');"
onclick="window.event.returnValue=false;">菜单项二</A>
</DIV>
</DIV>
<SPAN ID='idpad1' STYLE='display:none;position:absolute;width:70;background-
color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;'
onmouseout='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV STYLE='position:relative;left:0;top:8;'>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋
体;color:white' HREF='11.htm' TARGET='_top' onmouseout="mouseout();"
onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋
体;color:white' HREF='12.htm' TARGET='_top' onmouseout="mouseout();"
onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋
体;color:white' HREF='13.htm' TARGET='_top' onmouseout="mouseout();"
onmouseover="mouseover()">子菜单项</A>
</DIV>
</SPAN>
<SPAN ID='idpad2' STYLE='display:none;position:absolute;width:70;background-
color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;'
onmouseout='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV STYLE='position:relative;left:0;top:8;'>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋
体;color:white' HREF='21.htm' TARGET='_top' onmouseout="mouseout();"
onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋
体;color:white' HREF='22.htm' TARGET='_top' onmouseout="mouseout();"
onmouseover="mouseover()">子菜单项</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋
体;color:white' HREF='23.htm' TARGET='_top' onmouseout="mouseout();"
onmouseover="mouseover()">子菜单项</A><BR>
<HR STYLE='color:white' SIZE=1><!--分隔行-->
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋
体;color:white' onclick="parent.close()" onmouseout="mouseout();"
onmouseover="mouseover()">退出系统</A>
</DIV>
</SPAN>
</BODY>
</HTML>
给你个 自己去改改看吧
2007-07-05 10:51
2007-07-05 12:52
2007-07-05 15:43
2007-07-05 16:01
2007-07-05 16:41
[CODE]<style type="text/css">
.aa{
position:relative;}
td{font-size:20px;height:30px;}
#g1{display:none;
position:absolute;
top:32px;left:4px;
}
#g2{display:none;
position:absolute;
top:32px;left:203px;
}
#g3{display:none;
position:absolute;
top:32px;left:402px;
}
</style>
<table width="600" class="aa" align="center" bgcolor="red" border="1"><tr align="center">
<td width="200" onmouseover="ha(1)" onmouseout="haa(1)">
aaaa
<table width="100%" id="g1" width="200" bgcolor="red"><tr><td>aabb</td></tr><tr><td>aeee</td></tr></table>
</td>
<td width="200" onmouseover="ha(2)" onmouseout="haa(2)">
aaaa
<table width="100%" id="g2" width="200" bgcolor="red"><tr><td>34244</td></tr><tr><td>34244</td></tr><tr><td>34244</td></tr></table>
</td>
<td width="200" onmouseover="ha(3)" onmouseout="haa(3)">
aaaa
<table width="100%" id="g3" width="200" bgcolor="red"><tr><td>ttwet4</td></tr><tr><td>34244</td></tr><tr><td>34244</td></tr></table>
</td>
</tr></table>
<table width="800" height="300" align="center" border="1" bgcolor="#dsdsds"><tr><td></td></tr></table>
<script language="javascript">
function ha(a){
eval("document.getElementById('g"+a+"').style.display='block'")
}
function haa(a){eval("document.getElementById('g"+a+"').style.display='none'")}
</script>[/CODE]
[此贴子已经被作者于2007-7-5 17:58:29编辑过]
2007-07-05 17:56
2007-07-05 18:55
