* { margin:0; padding:0; font-family:Microsoft YaHei,serif; } li { list-style:none; } /*折叠菜单样式*/ .menu-wrap { width:350px; height:auto; margin:50px auto; border:solid 1px #ccc; background-color:#fff; } .title,.m-w-list li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; //文本不换行,这样超出一行的部分被截取,显示... } .title { width:100%; height:38px; line-height:38px; background-color:orange; color:#fff; text-indent:25px; border-bottom:solid 1px #8b5518; cursor:pointer; } .menu-wrap ul ul { display:none; line-height:38px; margin:2px auto 15px; } .menu-wrap ul ul li { width:100%; height:38px; line-height:38px; text-indent:25px; background-color:#f6f6f6; font-size:16px; border-bottom:dashed 1px #ccc; cursor:pointer } .menu-wrap ul ul li:hover { color:#fff; background-color:#e15656 } .menu-wrap ul ul.active { display:block }
样式易修改,js简洁明了,注释全面,如果还有不懂的可以发e-mail:2292269685@qq.com