CSS 折叠的菜单实现代码

网页制作 2024/12/27 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

<!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>CSS实现折叠的菜单</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="#">    <h1></h1> <span>为您提供精品源代码、网页特效代码等。</span></a></li>   </li>   <li><a href="#">    <h1>精品特效</h1> <span>精品特应有尽有</span></a></li>   </li>   <li><a href="#">    <h1>我是传奇</h1> <span>这里是内容</span></a></li>   </li>   <li><a href="#">    <h1>这是折叠标签</h1> <span>这里是内容</span></a></li>   </li></body></html>

提示：您可以先修改部分代码再运行

CSS,折叠菜单

标签：

CSS,折叠菜单

幽灵资源网 Design By www.bzswh.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

幽灵资源网 Design By www.bzswh.com

评论“CSS 折叠的菜单实现代码”

暂无评论...

CSS 折叠的菜单实现代码

CSS,折叠菜单

关于html元素的 width属性无效果的解决方法

css 教学实例漂亮的搜索框

评论“CSS 折叠的菜单实现代码”

友情链接

CSS 折叠的菜单实现代码

CSS,折叠菜单

关于html元素的 width属性无效果的解决方法

css 教学实例 漂亮的搜索框

评论“CSS 折叠的菜单实现代码”

友情链接

css 教学实例漂亮的搜索框