css高级应用之不用js实现切换菜单
运行代码框
<!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>不用js菜单实现切换</title> </head> <style type="text/css"> *{ margin:0px; padding:0px;} ul,li{ list-style:none;} #menu{ width:200px; height:500px; overflow:hidden; background-color:#CC6666;} #menu h1{ font-size:14px; color:red; margin:0px;} #menu li{ width:178px; border:#333 1px solid; border-bottom:none; background-color:green; display:block;} #menu li a{ display:block; padding:10px; text-decoration:none;} /*上面那句不加padding,ie,firefox显示不一致...*/ /*不加下面这句,ie6下没有效果,无法触发span显示*/ #menu li a:hover{ background-color:#fff;} #menu li a span{ display:none; padding-top:10px;} #menu li a:hover span{ display:block; cursor:hand; text-decoration:none;} /*cursor:hand;修复ie6 hover 伪类bug*/ #menu li.end{ border-bottom:#333 1px solid;} </style> <body> <ul id="menu"> <li> <a href="#" _fcksavedurl="#"> <h1>这是菜单1啊</h1> <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。11111111111111</span> </a></li> <li> <a href="#" _fcksavedurl="#"> <h1>这是菜单2啊</h1> <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。22222</span> </a></li> <li> <a href="#" _fcksavedurl="#"> <h1>这是菜单3啊</h1> <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。33333</span> </a></li> <li class="end"> <a href="#" _fcksavedurl="#"> <h1>这是菜单4啊</h1> <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。444444</span> </a></li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
你也可以点此查看演示
全球年龄最高博客人10
谷歌地球出动间谍车偷
谈谈阿里巴巴股票的“
告别单调：404错误页
80后写手兼赛车手韩寒
千千静听(TTPlayer)5.
WINGHO系统备份还原工
赛酷网·中国西部第一建站门户
本月热门 阅读排行 最新下载
您现在的位置： 
最新图文
