CSS 折叠的菜单实现代码

ttx9n · 发表于 2009-10-15 00:13:01

这个是用纯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>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>

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

pwseqn1h · 发表于 2022-9-21 11:43:56

额风风风微风微风违法

do827261756 · 发表于 2023-2-9 11:23:32

的vgdsvsdvdsvdsvds

平平安安 · 发表于 2023-9-7 12:56:17

刷屏刷屏刷屏

rveqwdpw5 · 发表于 2023-11-28 10:12:31

66666666666666666666

4k0mp7m · 发表于 2024-3-8 15:58:34

而快乐你们快乐马年快乐

e5plu · 发表于 2024-3-30 10:52:59

数据库了多久撒快乐的健身卡啦

81708585 · 发表于 2024-4-3 16:14:19

啦啦啦啦啦德玛西亚

360784533 · 发表于 2024-7-17 06:36:30

还可以不错

jhf · 发表于 2024-8-30 17:41:28

看看看看

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS 折叠的菜单实现代码

相关帖子