圣诞树啊，应该是考虑怎样画三角形吧，用border就可以了哈。
<!DOCTYPE html><html>
<head>
<title></title>
<style type="text/css">
.ss{
height: 0
width: 0
position: absolute
border: 20px solid tan
border-color: transparent transparent #1fd224 transparent
}
.s1{
border-width:80px
top: 100px
left: 400px
}
.s2{
border-width:100px
top: 115px
left: 382px
}
.s3{
border-width:120px
top: 126px
left: 362px
}
.s4{
border-width:140px
top: 140px
left: 342px
}
.dd{
height: 130px
width: 40px
position: absolute
top: 420px
left: 460px
background-color: #1fd224
}
</style>
</head>
<body>
<div class="s1 ss"></div>
<div class="s2 ss"></div>
<div class="s3 ss"></div>
<div class="s4 ss"></div>
<div class="dd">
</div>
</body>
</html>
看着有点丑，楼主可以改变宽度高度以及颜色哈。最后希望采纳哈
<类型>* {填充：0；保证金：0；}
位置：相对。树{；}
树的div。{ position:绝对；宽度：0；高度：0；}
树。木材{宽度：20px；高度：50px；背景颜色：灰色；左：50%；margin-left: - 10px；顶：170px；}
。A1 {边境：40px固绿；边境上：40px固体# FFF；左：50%；margin-left: - 40px；高层：0；}
A2。{左边界：40px固绿；边境上：40px固体# FFF；左：50%；高层：0；}
B1。{边界：70px固体绿；边境上：固体# FFF 70px；左：50%；margin-left: - 70px；顶：20px；}
。B2 {左边界：70px固体绿；边境上：固体# FFF 70px；左：50%；顶部20px；}
。C1 {边界：100px固绿；边境上：100px固体# FFF；左：50%；margin-left: - 100px；顶：70px；}
C2。{左边界：100px固绿；边境上：100px固体# FFF；左：50%；顶：70px；}
</样式>
＜div class=“树”>
＜div class=“木”><数据>
＜div＞＜／div = C1类＞＜div＞＜／div = C2类>
＜div＞＜／div = B1类＞＜div＞＜／div = b2类>
＜div class=“A1”＞＜／div＞＜div class=“A2”><数据>
<数据>
利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。
