<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的下拉框</title> <style> * { padding: 0; margin: 0; } .main { 1200px; height: 300px; margin: 0 auto; } h3 { margin-left: 20px; background-color: #888; } .dis { float: left; } li { list-style: none; margin-left: 30px; margin-top: 10px; } ul { display: none; margin-left: 19px; background-color: #888; } </style> </head> <body> <div class="main"> <div class="dis"> <h3 onmouseover="one(0)">z选项一</h3> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> <div class="dis"> <h3 onmouseover="one(1)">z选项二</h3> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> <div class="dis"> <h3 onmouseover="one(2)">z选项三</h3> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> <div class="dis"> <h3 onmouseover="one(3)">z选项四</h3> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> </div> <script> function one(num){ var objs = document.getElementsByTagName("ul"); for(var i = 0; i < objs.length;i ++) { if (i == num) { objs[i].style.display = "block"; }else { objs[i].style.display = "none"; } } } </script> </body> </html>