<html> <head> <title>浮在页面上的导航菜单</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <mce:style><!-- body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac /*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; } /* The magic */ --></mce:style><style mce_bogus="1">body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac /*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; } /* The magic */</style> <mce:script language="JavaScript"><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[ i ]; if (node.nodeName=="LI") { node.οnmοuseοver=function() { this.className+=" over"; } node.οnmοuseοut=function() { this.className=this.className.replace(" over", ""); } } } } } // --></mce:script> <mce:script language="JavaScript"><!-- function setVariables() { if (navigator.appName == "Netscape") { v=".top="; dS="document."; sD=""; y="window.pageYOffset"; } else { v=".pixelTop="; dS=""; sD=".style"; y="document.body.scrollTop"; } } function checkLocation() { object="object1"; yy=eval(y); yy = yy+100; eval(dS+object+sD+v+yy); setTimeout("checkLocation()",10); } // --></mce:script> </head> <body οnlοad="setVariables();checkLocation();startList();"> <div id="object1" style="left: 10; position: absolute; top: 94; z-index: 5; width: 221; height: 293"> <ul id="nav"> <li><a href="">网站首页</a> <ul> <li><a href="">网页特效</a></li> <li><a href="">广告代码</a></li> </ul> </li> <li><a href="">您自定义</a> <ul> <li><a href="">您自定义</a></li> <li><a href="">您自定义</a></li> <li><a href="">您自定义</a></li> <li><a href="">您自定义</a></li> <li><a href="">您自定义</a></li> </ul> </li> <li><a href="">您自定义</a> <ul> <li><a href="">您自定义</a></li> <li><a href="">您自定义</a></li> <li><a href="">您自定义</a></li> <li><a href="">您自定义</a></li> </ul> </li> </ul> </div> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> </body> </html>
js + css实现左侧悬浮导航栏
最新推荐文章于 2023-10-17 17:30:11 发布
2675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
