<!doctype Html>"Utf-8"><TITLE>CSS version drop-down menu </title><style type="Text/css">div,body,ul,li{padding:0; margin:0; list-Style:none;}. all{width:550px, height:30px, background: #06F; margin:100px auto; Line-height:30px; padding-left:10px; Margin-bottom:0;} li{width:100px, height:30px, background: #ccc;float: Left; Text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;} UL ul li{color:red;} UL Ul{position:absolute; Left:0; top:30px; display:none;}. ceshi{width:800px; height:100px; background:gold; margin:0Auto;}. All Li:hover Ul{display:block;} IE6 dead, can be fair and square regardless of compatibility issues, you can rest assured that the use of pseudo-class </style>class=" All"> <ul> <li><a href="#"> Home </a> <ul> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> </ul> </li> <li>Web Design<ul> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> </ul> </li> <li>UI Design<ul> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> </ul> </li> <li>Animation Design<ul> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> </ul> </li> <li>js Effects<ul> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> </ul> </li> </ul></div><divclass="Ceshi"</div></body><!doctype Html>"Utf-8"><TITLE>JS version drop-down menu </title><style type="Text/css">div,body,ul,li{padding:0; margin:0; list-Style:none;}. all{width:550px, height:30px, background: #06F; margin:100px auto; Line-height:30px; padding-left:10px; Margin-bottom:0;} li{width:100px, height:30px, background: #ccc;float: Left; Text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;} UL ul li{color:red;} UL Ul{position:absolute; Left:0; top:30px; display:none;}. ceshi{width:800px; height:100px; background:gold; margin:0Auto;}</style><script>window.onload=function () {varOmenu=document.getelementbyid ('Menu'); varAli=Omenu.children; varAul=omenu.getelementsbytagname ('ul'); for(varI=0; i<ali.length;i++) {Ali[i].index=i; Ali[i].onmouseover=function () { for(varI=0; i<aul.length;i++)// First of all, first to exclude and then choose their own {Aul[i].style.display='None'; } aul[ This. index].style.display='Block'; } ali[i].onmouseout=function () { for(varI=0; i<aul.length;i++) {Aul[i].style.display='None'; } } } };</script>class=" All"> <ul id="Menu"> <li><a href="#"> Home </a> <ul> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> </ul> </li> <li>Web Design<ul> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> <li><a href="#"> Level Two menu </a></li> </ul> </li> <li>UI Design<ul> <li> Level Two menu </li> <li> level Two menu </li> <li> two-level menu </li> <li> Level Two menu </li> </ul> </li> <li>Animation Design<ul> <li> Level Two menu </li> <li> level Two menu </li> <li> two-level menu </li> <li> Level Two menu </li> </ul> </li> <li>js Effects<ul> <li> Level Two menu </li> <li> level Two menu </li> <li> two-level menu </li> <li> Level Two menu </li> </ul> </li> </ul></div>& Lt;divclass="Ceshi"</div></body>Pure CSS and JS drop-down menu