效果不错的JS+CSS菜单,适当修改后可应用于很多地方 < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> < title > css菜单 </ title > < style > ... body{...}{background-color:#B8B8A0;}#fbtn{...}{display:none;overflow:hidden;border-style:solid;border-width:1px;border-color:#e1e1c9#e1e1c9 #6e6e56 #6e6e56;padding:1 1 11;width:115px;height:30px;}#fbtn_txt{...}{position:relative;}#fbtn_txtdiv{...}{height:30px;padding-top:11px;font-size:12px;font-family:smallfonts;color:#800080;text-align:center;cursor:hand;}#fbtn_mask{...}{background-color:#ffffff;position:relative;width:100%;height:100%;} </ style > </ head > < body > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > G1 </ div > < div > goodmorning </ div > </ div > </ div > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > G2 </ div > < div > goodevening </ div > </ div > </ div > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > M1 </ div > < div > my name isfireyy </ div > </ div > </ div > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > M2 </ div > < div > mm mm i loveu </ div > </ div > </ div > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > G1 </ div > < div > goodmorning </ div > </ div > </ div > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > G2 </ div > < div > goodevening </ div > </ div > </ div > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > M1 </ div > < div > my name isfireyy </ div > </ div > </ div > < div id =fbtn > < div id =fbtn_mask ></ div > < div id =fbtn_txt > < div > M2 </ div > < div > mm mm i loveu </ div > </ div > </ div > < script > ... varcurrent=null;var t=null;for(vari=0;i<fbtn.length;i++)...{fbtn_txt[i].style.posTop=-30;fbtn_mask[i].style.posTop=-30;fbtn[i].index=i;fbtn[i].style.display="block";fbtn[i].onmouseover=function()...{if(!current)...{current=this;domove(this.index);}elseif(current!=this)...{domove(current.index);domove(this.index);current=this;}}fbtn[i].onmouseout=function()...{if(event.toElement==this.parentElement&t==this)...{domove(this.index);current=null;}}}functiondomove(num)...{var o=fbtn_txt[num];varm=fbtn_mask[num];if(o.style.posTop<-60)...{o.style.display="none";vart=o.children[1].innerHTML;o.children[1].innerHTML=o.children[0].innerHTML;o.children[0].innerHTML=t;o.style.posTop=-30;o.style.display="block";if(m.style.posTop>30)m.style.posTop=-30;elsem.style.posTop=0;}else...{m.style.posTop+=3;o.style.posTop-=3;setTimeout('domove('+num+')',15);}} </ script > </ body > </ html >