body { font-family:16px "Micorsoft YaHei",sans-serif; } .nav-list li a { text-decoration:none; } .nav-list ul { list-style:none; margin:0px; padding:0px; display:none; } .nav-list { width:220px; } .nav-list h3 { position:relative; margin:0px; padding:10px 20px; font-size:16px; line-height:20px; /* font-weight:normal; */ color:#fff; background-color:#333; border-top:1px solid #ccc; cursor:pointer; } .nav-list h3 span:hover { background-color:#222; } .nav-list h3 span { /* font-weight:normal; */ position:absolute; right:20px; top:14px; width:12px; height:12px; background:url("img/off.png") no-repeat;/* 默认时图片推荐12*12px*/ } .nav-list h3.open span { background:url("img/on.png") no-repeat;/* 展开时图片推荐12*12px*/ } .nav-list li a { display:block; padding:10px 20px; font-size:16px; font-weight:normal; color:#333; background-color:#f5f5f5; border:1px solid #ccc; border-bottom:none; } /* 鼠标划过颜色 */ .nav-list li a:hover { background-color:#ccc; }
类似于itellyou网站的可以收缩的左(右)菜单条。js代码比较少,用了jquery