CSS:

*{padding: 0;margin: 0;} ul,li{list-style: none;} body{color: #666;background: #f5f5f5;} a{text-decoration: none;color: #666;} .cont{ width: 400px; margin: 30px auto; position: relative; background: #fff; box-shadow: 2px 2px 5px #e6e2e2; } .tit_1,.tit_2,.tit_3,.tit_4{ height: 44px; line-height: 44px; position: relative; padding-left: 40px; } .tit_1:before{ content: ''; position: absolute; left: 15px; top: 12px; border:10px solid transparent; border-left-color:#ccc; } .tit_2:before{ content: ''; position: absolute; left: 15px; top: 12px; border:10px solid transparent; border-left-color:#fff; } .tit_3:before{ content: ''; position: absolute; left: 15px; top: 17px; border:10px solid transparent; border-top-color:#ccc; } .tit_4:before{ content: ''; position: absolute; left: 15px; top: 17px; border:10px solid transparent; border-top-color:#fff; } .active{ height: 28px; line-height: 28px; padding-left: 40px; cursor: pointer; } #ul1{ padding: 20px 0; } .hidden{ display: none; } .on{ display: block; }

HTML:

护肤用品面部卸妆眼部护理卸妆油卸妆棉彩妆香水隔离霜BB霜粉底液腮红唇彩个人护理头发护理洗发水发膜焗油护发素香水香氛女士香水淡香水男士香水古龙香水运动香水

JS:

<script type="text/javascript"> var oUl=document.getElementById('ul1'); var aUl=oUl.getElementsByTagName('ul'); var aH=oUl.getElementsByTagName('h3'); var aLi=null; var len=aUl.length; for (var i = 0; i <len; i++) { aLi=aUl[i].getElementsByTagName('li'); for (var j = 0; j < aLi.length; j++) { aLi[j].className='active'; aLi[j].onmouseover=function(){ .style.color='#e4007e'; } aLi[j].onmouseout=function(){ .style.color='#666'; } }; }; for (var i = 0; i < aH.length; i++) { aH[i].index=i; //鼠标经过当前h3时，背景色、字体颜色改变 aH[i].onmouseover=function(){ this.style.backgroundColor='#e4007e'; this.style.color='#fff'; (aUl[this.index].className=='hidden') { this.className='tit_2';//列表内容隐藏时，小三角形的样式tit_2 } else{ this.className='tit_4';//列表内容展开时，小三角形的样式tit_4 }; } aH[i].onmouseout=function(){ this.style.backgroundColor='#fff'; this.style.color='#666'; (aUl[this.index].className=='hidden') { this.className='tit_1';//列表内容展开时，小三角形的样式tit_1 } else{ this.className='tit_3';//列表内容展开时，小三角形的样式tit_3 }; } aH[i].onclick=function(){ (aUl[this.index].className=='hidden') { aUl[this.index].className='on'; this.className='tit_4'; } else{ aUl[this.index].className='hidden'; this.className='tit_2'; }; } }; </script>