CSS实现鼠标触发展开折叠的精美菜单_html-js-css

概述网(LieHuo.Net)教程这个是用纯CSS鼠标触发展开折叠的精美菜单代码，暖色调非常漂亮哦，测试发现兼容性也挺好，有用的朋友先收藏一下吧。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&…

　　内存溢出 jb51.cc 这个是用纯CSS鼠标触发展开折叠的精美菜单代码，暖色调非常漂亮哦，测试发现兼容性也挺好，有用的朋友先收藏一下吧。

<!DOCTYPE @R_301_6832@ PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><@R_301_6832@ xmlns="http://www.w3.org/1999/xhtml"><head><Meta http-equiv="Content-Type" content="text/@R_301_6832@; charset=gb2312" /><Title>CSS实现鼠标触发展开折叠的精美菜单 - LIEHUO.NET</Title><style type="text/CSS">#menu { overflow:hidden; background-color:#fbfef4; wIDth:200px; height:500px; overflow:hidden;}#menu h1{margin:0px;color:#739c23; Font-size:14px;}#menu li { List-style:none; display:block; wIDth:178px; border:1px solID #739c23; border-bottom-wIDth:0px;}#menu li .end{border-bottom-wIDth:1px;}#menu li a{ display:block; text-decoration:none; wIDth:100%; padding:10px;}#menu li a span{ display:none; color:#333; Font-size:12px; padding:10px 0 0 0;}#menu li a:hover{ background:#fff;}#menu li a:hover span{ display:block; cursor: hand;}</style></head><body><ul ID="menu"><li><a href="#" _fcksavedurl="#"><h1>站长网</h1><span>LIEHUO.NET为您提供站长教程、网页设计、源码资源等。</span></a></li></li><li><a href="#" _fcksavedurl="#"><h1>站长工具</h1><span>站长所需要的各类工具特应有尽有！</span></a></li></li><li><a href="#" _fcksavedurl="#"><h1>论坛</h1><span>菜鸟级IT技术交流社区！</span></a></li></li><li><a href="#" _fcksavedurl="#"><h1>这是折叠标签</h1><span>这里是内容</span></a></li></li></body></@R_301_6832@><br /><center>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

总结

以上是内存溢出为你收集整理的CSS实现鼠标触发展开折叠的精美菜单全部内容，希望文章能够帮你解决CSS实现鼠标触发展开折叠的精美菜单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1022865.html

CSS实现鼠标触发展开折叠的精美菜单

发表评论

评论列表（0条）