<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } a,img{border:0;} #menu{ position: absolute; top: 30px; left: 0; right: 0; margin: auto; width: 400px; border-left: 1px solid gray; border-top: 1px solid gray; background-color: lemonchiffon; text-align: center; } #menu li{ list-style: none; float: left; width: 99px; height: 30px; line-height: 30px; border-right: 1px solid gray; background-color: burlywood; color: white; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; } #menu li:hover{ background-color: lemonchiffon; color: #336699; } .contain{ position: absolute; left: -1px; display: none; width: 399px; height: 300px; color: #336699; border-left: 1px solid gray; border-right: 1px solid gray; border-bottom: 1px solid gray; background-color: lemonchiffon; } </style> <script> window.onload = function(){ var menu = document.getElementById('menu'); if(menu.addEventListener){ menu.addEventListener('mouseover',show,false); menu.addEventListener('mouseout',hide,false); }else if(menu.attachEvent){ menu.attachEvent('onmouseover',show,false); menu.attachEvent('onmouseout',hide,false); } function show(event){ var target = event.target||event.srcElement; if(target.tagName.toLowerCase() === 'li'){ target.firstElementChild.style.display = 'block'; }else if(target.parentNode.tagName.toLowerCase() === 'li'){ target.style.display = 'block'; } } function hide(event){ var target = event.target||event.srcElement; if(target.tagName.toLowerCase() === 'li'){ target.firstElementChild.style.display = 'none'; }else if(target.parentNode.tagName.toLowerCase() === 'li'){ target.style.display = 'none'; } } } </script> </head> <body> <div> <ul> <li>苏福的特效1 <div>111111111111</div> </li> <li>苏福的特效2 <div>222222222222</div> </li> <li>苏福的特效3 <div>333333333333</div> </li> <li>苏福的特效4 <div>444444444444</div> </li> </ul> </div> </body> </html>
效果图：
