DIV+CSS实现的滑动门菜单特效代码

<！DOCTYPE Html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html XMLns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>脚本之家DIV+CSS实现的滑动门菜单特效 </title><style type="text/Css">#menu {margin:0;padding:0;height:26em;overflow:hidden;background:#FFFCF2;}#menu li {list-style-type:none;float:left;display:block;width:100%;}#menu li a {display:block;text-decoration:none;color:#00b;margin:0;width:100%;}#menu li a span {display:none;color:#453739;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;padding: 10px 0px 5px;}#menu li a.one span {display:block;height:15em;margin:0 10px;}#menu li a:hover {background:#FFFCF2;}#menu li a:hover span {display:block;height:15em;margin:0 10px;cursor:pointer;}#menu .h2 {margin:0 5px;padding:0;color:#933A34;font-size:12px;border:0;font-family: Verdana, Arial, Helvetica, sans-serif;}#menu .h3 {margin:0 5px;padding:0;font-size:10px;color:#62583B;font-family: Verdana, Arial, Helvetica, sans-serif;}#menu img {margin:0px 5px 5px;border:1px solid #000;float:left;}.curved {width:21em;}.curved .b1, .curved .b2, .curved .b3, .curved .b4 {font-size:1px;display:block;background:#C7BC98;/* hide overflow:hidden from IE5/Mac *//* */overflow: hidden;/* */}.curved .b1, .curved .b2, .curved .b3 {height:1px;}.curved .b2, .curved .b3, .curved .b4 {background:#FFFCF2;border-left:1px solid #C7BC98;border-right:1px solid #C7BC98;}.curved .b1 {margin:0 4px;background:#C7BC98;}.curved .b2 {margin:0 2px;border-width:0 2px;}.curved .b3 {margin:0 1px;}.curved .b4 {height:2px;margin:0;}.curved .c1 {margin:0 5px;background:#C7BC98;}.curved .c2 {margin:0 3px;border-width:0 2px;}.curved .c3 {margin:0 2px;}.curved .c4 {height:2px;margin: 0 1px;}.curved .boxcontent {display:block;background:transparent;border-left:1px solid #C7BC98;border-right:1px solid #C7BC98;font-size:0.9em;text-align:justify;}</style></head><body> <ul id="menu"> <li> 脚本之家[2007-05-16]<img src="http://www.jb51.net/images/logo.gif" alt="jb51.net脚本之家" />脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化</li> <li> 网络编程[2007-05-16]<img src="http://www.jb51.net/images/logo.gif" alt="jb51.net脚本之家" />脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化</li> <li>脚本专栏[2006-06-18]<img src="http://www.jb51.net/images/logo.gif" alt="jb51.net脚本之家" />脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化</li> <li> 网页制作相关知识[2007-05-16]<img src="http://www.jb51.net/images/logo.gif" alt="jb51.net脚本之家" />脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化</li> <li> 实用技巧[2007-05-16]<img src="http://www.jb51.net/images/logo.gif" alt="jb51.net脚本之家" />脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化</li></ul> </body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]