这篇博客介绍了如何使用纯CSS实现一个基础的手风琴式菜单。内容包括CSS和HTML代码示例，适合CSS初学者练习。通过CSS的visibility属性控制元素的隐藏与显示，达到手风琴菜单的效果。
最近练手的一个小作品，具体美化还没完善，只是实现基本功能。CSS代码也是用的最基础的，适合新手操作演练。
上代码！
CSS部分：
ul {
list-style:none;
margin:0 auto 0 0;
width:100px;
text-align:center;
}
ul li {
margin:0;
padding:10px 0;
}
ul li a{
cursor:pointer;
margin:0;
padding:10px 50px;
background:orange;
position:relative;
border-radius:4px;
}
ul ul {
margin:0;
background:#bfbfbf;
visibility:hidden;
padding:0 12px;
position:relative;
height: 0;
}
ul li:hover > ul {
height: auto;
visibility:visible;
}
ul ul li span:hover {
cursor:pointer;
border:1px solid black;
}
HTML部分：
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="u
最低0.47元/天 解锁文章
扫一扫
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
