js + css实现左侧悬浮导航栏

wapysun

浏览: 21516513 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

<html> <head> <title>浮在页面上的导航菜单</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <mce:style></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"></mce:script> <mce:script language="JavaScript"></mce:script> </head> <body onload="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> 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 </body> </html>

分享到：