css实现鼠标经过折叠标签展开文本内容效果，很实用的一个网页特效，结合自己的需求来稍作修改即可使用。
<style type="text/css">
<!--
#wwwwumingren_menu{
overflow:hidden;
background-color:#fbfef4;
width:210px;
height:550px;
}
#wwwwumingren_menu h1 {
font-size: 14px;
margin:0px;
color:#739c23;
}
#wwwwumingren_menu li {
display: block;
width: 180px;
list-style-type:none;
border:1px solid #739c23;
border-bottom-width:0px;
}
#wwwwumingren_menu li.end{
border-bottom-width:1px;}
#wwwwumingren_menu li a {
display:block;
text-decoration:none;
width:100%;
padding:10px;
}
#wwwwumingren_menu li a span{
display:none;
color:#333;
font-size:12px;
padding-top:10px;
}
#wwwwumingren_menu li a:hover{
background:#fff;}
#wwwwumingren_menu li a:hover span{
display:block;
cursor:hand;}
-->
</style>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul id="wwwwumingren_menu">
<li><a href="https://www.wuming.ren">
<h1>武鸣人一号</h1>
<span>武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢！</span></a></li>
<li><a href="https://www.wuming.ren">
<h1>武鸣人二号</h1>
<span>武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢！</span></a></li>
<li class="end"><a href="https://www.wuming.ren">
<h1>武鸣人三号</h1>
<span>武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢！</span>
</a></li>
</ul>
</body>本文来自武鸣人网站，转载请注明出处