你没定义dl的高度，哪来的overflow?
创新互联公司“设计定江山，服务赢天下“的思想，用细节和态度获得客户的认可与同行的尊重，服务是创新互联公司企业文化中重要的核心思想，每一位员工要致力成为客户心中坚实的服务后盾。
htmlhead
style type = "text/css"
!--
dl {background-color:#000;color:#fff;width:100px;height:20px;}
dt {cursor:pointer;width:100%;background-color:#666;}
.expand {overflow:visible;}
.collapse{overflow:hidden;}
//--
/style
script language="javascript" type="text/javascript"
function a(dt){
var dl=dt.parentNode;
if("collapse"==dl.className)dl.className="expand";
else dl.className="collapse";
}
/script/head
body
dl class="collapse"
dt onmouseover="a(this)"aaa/dt
ddadfsd/dd
dddffff/dd
ddwwww/dd
/dl
/body
/html
利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。
像css, html, JavaScript以及其它代码, 都是纯文本文件, 你所看到的折叠, 着色等功能都是编辑器实现的, 不需要特别操作, 只需要使用好的代码编辑器就可以了. visual studio code以及atom都是当今最为流行也最为出色的JavaScript/html/css编辑器. 都是免费的, 体积也都比较小. 百度直接搜索,打开官网下载即可.
可以改变 "div" 元素的高度(jQuery的animate方法)：
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
也可以设置溢出隐藏：
div style="min-height:10px;overflow:hidden"
div style="margin-top:-800px"content more../div
/div
第二种方式也需要js动态改变div style里面的margin-top。
用html和css实现标签折叠，代码如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title用html和css实现标签折叠/title
/head
body
ul id="fm"
lia href="#"h1折叠标签A/h1
span这里是描述标签A/span
span这里是描述标签A/span
span这里是描述标签A/span
/a/li
lia href="#"h1折叠标签B/h1
span这里是描述标签B/span
span这里是描述标签B/span
span这里是描述标签B/span/a
lia href="#"h1折叠标签C/h1
span这里是描述标签C/span
span这里是描述标签C/span
span这里是描述标签C/span/a
lia href="#"h1折叠标签D/h1
span这里是描述标签D/span
span这里是描述标签D/span
span这里是描述标签D/span/a
/ul
/body
/html
CSS样式为：
style type="text/css"
#fm{
overflow:hidden;
background-color:#FFCCCC;
width:200px;
height:500px;
overflow:hidden;
}
#fm h1{
margin:0px;
color:#FF3333;
font-size:14px;
}
#fm li{
list-sytle-type:none;
display:block;
width:178px;
border:1px solid #00CCCC;
border-bottom-width:0px;
}
#fm li.end{
border-bottom-width:1px;
}
#fm li a{
display:block;
text-decoration:none;
width:100%;
padding:10px;
}
#fm li a span{
display:none;
color:#000000;
font-size:12px;
padding-top:10px;
}
#fm li a:hover{
background:#fff;
}
#fm li a:hover span{
display:block;
cursor:hand;
}
/style
效果如图：
以上就是用html和css实现标签折叠的解决方法。
这样就是一个展开收缩的效果了
body
div id="div1"
ul
li/li
/ul
/div
script
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var Off = true;
oDiv.onclick = function(){
if(Off){
oUl.style.display = "block";
Off = false;
}else{
oUl.style.display = "none";
Off = true;
}
}
/script
