超完整的代码+详细注释，适合给小白做的简单的手风琴菜单实例
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 清除默认样式 */* {/* 外边距 */margin: 0;/* 内边距 */padding: 0;}a {/* 去掉 a标签 默认下划线 */text-decoration: none;}/* ***********以上为公共样式 ************ */.box {/* 宽度 */width: 728px;/* 高度 */height: 340px;/* 外边距 上下100px 左右居中 */margin: 100px auto;}.box div {/* 超出盒子大小隐藏多余内容 这里默认用子元素a标签 撑开父元素div 的高度 */overflow: hidden;/* 底部外边距10px */margin-bottom: 10px;}.box a {height: 50px;/* 内联元素转变为块元素 */display: block;/* a标签背景颜色设置 */background-color: #b1b1b1;/* 字体颜色 */color: #fff;/* 行高 上下对齐字体 */line-height: 50px;/* 内边距左边 距离a标签d的border外边框距离设置为15px */padding-left: 15px;/* 设置边框圆角 */border-radius: 5px;/* 相对定位 为呼应子元素 i 定位*/position: relative;}/* 三角形样式 */.box i {/* 内联元素转变为块元素 */display: block;/* 给 i 设置宽高 */width: 0px;height: 0px;/* 边框： 大小10px 实线 颜色 */border: 10px solid #000;/* 边框颜色 白色 透明 透明 透明 */border-color: #fff transparent transparent transparent;/* 根据父元素 a标签 绝对定位 */position: absolute;/* 三角形相对于 a标签 位置 */right: 11px;top: 22px;}p {height: 0;/* 设置竖直滑动条 */overflow-y: scroll;/* 内边距左边 由于我们没有给p标签设置宽度，所以这里就不用了再另外减去宽度或者设置怪异盒子模型（box-sizing: border-box;） */padding-left: 10px;/* 设置浏览p标签时间过渡 这里仅设置高度过渡 时间为2s */transition: height 2s;}/* 目标伪类选择器（点击后效果） */:target p {/* 固定p标签高度 */height: 153px;background-color: green;}:target a {/* 背景颜色 */background-color: #3d98e9;}:target i {/* 边框颜色 白色 透明 透明 透明 */border-color: transparent transparent transparent #fff;/* 三角形相对于 a标签 位置 */top: 16px;right: 8px;}</style></head><body><div class="box"><div id="box1"><a href="#box1">Brand<i></i></a><p></p></div><div id="box2"><a href="#box2">Promotion<i></i></a><p></p></div><div id="box3"><a href="#box3">Event<i></i></a><p></p></div></div></body></html>
实现效果
打开html文件 效果如下图：
分别点击每个块，实现手风琴效果如下：
border-color解释
边框颜色 上 右 下 左
border-color: red green blue yellow;
/* 边框颜色 白色 透明 透明 透明 （不显示颜色）*/
border-color: #fff transparent transparent transparent ;
绝对定位（ position 属性）：
说明：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值： static
继承性： no
版本： CSS2
JavaScript 语法： object.style.position=“absolute”
