<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
BODY {font-size:9pt;color:white;background-color:yellow}
TABLE{font-size:9pt;color:snow;background-color:darkblue;BORDER-COLLAPSE: collapse;text-align:center}
DIV{font-size:9pt;color:springgreen;background-color:green}
TD{cursor:hand}
FONT {font-size:9pt;color:lime;cursor:hand}
.over {color:gold;background-color:slateblue}
.out{ color:snow;background-color:darkblue}
</style>
<script>
function popmenu(obj1)
{
obj1.className="over";
menu1.style.backgroundColor="slateblue";
menu1.style.borderTopColor="slateblue";
menu1.style.top=obj1.offsetTop+obj1.offsetHeight;
menu2.style.top=obj1.offsetTop+obj1.offsetHeight+10;
menu1.style.left=obj1.offsetLeft+obj1.offsetWidth/2-40;
menu2.style.left=obj1.offsetLeft+obj1.offsetWidth/2-30;
menu1.style.display="";
menu2.style.display="";
}
function menuout(obj1) {
obj1.className="out";
menu1.style.backgroundColor="darkblue";
menu1.style.borderTopColor="darkblue";
}
function menuclear()
{ if (event.toElement.tagName!="FONT")
{
menu1.style.display='none';
menu2.style.display='none';
}
}
function hide()
{menu1.style.display='none';menu2.style.display='none';}
</script>
<title></title>
</head>
<body topmargin="0" leftmargin="0" οnresize="location.reload()">
<script>
for(x=0;x<=document.body.offsetWidth;x+=10){
document.write("<div style='position:absolute;left:"+x+";top:0;height:100%;width:1;font-size:1pt;background-color:gray;border:0;z-index:-2'></div>")
}
for(x=0;x<=document.body.offsetHeight;x+=10) {
document.write("<div style='position:absolute;left:0;top:"+x+";height:1;width:100%;font-size:1pt;background-color:gray;border:0;z-index:-2'></div>")
}
</script>
<div id=menu1 οnmοuseοut="menuclear()" style="position:absolute;text-align:center;color:snow;background-color:slateblue;top:100;left:100;height:200;width:80;display:none;border-style:solid;border-width:1;border-color:cyan;border-top-color:slateblue;z-index:1">
<br>
<script>
for(x=0;x<11;x++){document.write("<font οnmοuseοver=this.style.color='red' οnmοuseοut=this.style.color='lime'>子菜单一</font><br>");}
</script>
</div>
<div id=menu2 style="position:absolute;Filter:Alpha(opacity=40);background-color:black;height:200;width:80;z-index:-1;display:none"></div>
<table border="1" cellspacing="1" width="100%" bordercolor="#00FFFF" style="position: absolute; top: 0" >
<tr>
<td width="16%" οnmοuseοver="popmenu(this)" οnmοuseοut="menuout(this)" οnclick="menu1.style.display='none';menu2.style.display='none'" >主页</td>
<td width="16%" οnmοuseοver="popmenu(this)" οnmοuseοut="menuout(this)" οnclick="menu1.style.display='none';menu2.style.display='none'">菜单一</td>
<td width="17%" οnmοuseοver="popmenu(this)" οnmοuseοut="menuout(this)" οnclick="menu1.style.display='none';menu2.style.display='none'">菜单二</td>
<td width="17%" οnmοuseοver="popmenu(this)" οnmοuseοut="menuout(this)" οnclick="menu1.style.display='none';menu2.style.display='none'">菜单三</td>
<td width="17%" οnmοuseοver="popmenu(this)" οnmοuseοut="menuout(this)" οnclick="menu1.style.display='none';menu2.style.display='none'">菜单四</td>
<td width="17%" οnmοuseοver="popmenu(this)" οnmοuseοut="menuout(this)" οnclick="menu1.style.display='none';menu2.style.display='none'">菜单五</td>
</tr>
</table>
</body>
</html>
一个效果不错的下拉菜单代码
原创
©著作权归作者所有:来自51CTO博客作者DickyNet的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:仿微软风格的按钮演示
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Vue3 实现一个简单的路由切换效果
Vue3 实现一个简单的路由切换效果
vue router -
一个简单的JQUERY下拉菜单插件
一.按照惯例,先上DOM结构<div id="menu"> <ul>
职场 插件 休闲 JQUERY 下拉菜单 -
运用jQuery写下拉菜单效果
<head> <meta charset="utf-8" /> <title>下拉菜单</title></head><style type="text/css"> u
jQuery jquery javascript ide 子菜单