Html
    Css
    Js

    
                        
 * {
	padding:0;
	margin:0;
}
.menu {
	width:200px;
	height:auto;
	margin:100px auto;
}
.item {
	width:100%;
	height:auto;
}
.item > h3 {
	height:40px;
	line-height:40px;
	background-color:#7dffe7;
	color:orange;
	border-bottom:2px solid #ccc;
	padding-left:10px;
}
.item > .itembox {
	width:100%;
	height:0px;
	overflow:hidden;
	/*display:none;
	*/
            /*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡*/
            /*1.一定要设置为哪些css样式添加过渡效果*/
            /*transition-property:display;
	*/
            transition-property:height;
	/*2.一定要设置过渡效果的耗时*/
            transition-duration:1s;
}
.item > .itembox > ul {
	list-style:none;
	background-color:#eaffb6;
	padding:10px;
}
/*为item添加hover伪类*/
        .item:hover > .itembox {
	/*display:block;
	*/
            height:110px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯CSS3手风琴菜单

0