* { 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; }