<style type="text/css"> *{margin:0;padding:0;list-style:none;font-size:14px} #caidan{width:200px; height:500px; border:1px solid #00F;text-align:center; vertical-align:middle; line-height:50px;} .title{background:green;color:#fff;border-bottom:1px solid #fff;cursor:pointer;} .title1{background:blue;color:#000;border-bottom:1px solid #666;cursor:pointer;} .erji li{ background-color:red;} </style> </head> <body> <div id="caidan"> <div class="title" id="menu1" onclick="dianji('1')">列表1</div> <div id="list1" class="erji" style="display:none"> <ul> <li>下拉列表1</li> <li>下拉列表2</li> <li>下拉列表3</li> </ul> </div> <div class="title" id="menu2" onclick="dianji('2')">列表2</div> <div class="erji" id="list2" style="display:none"> <ul> <li>下拉列表4</li> <li>下拉列表5</li> <li>下拉列表6</li> </ul> </div> <div class="title" id="menu3" onclick="dianji('3')">列表3</div> <div class="erji" id="list3" style="display:none"> <ul> <li>下拉列表7</li> <li>下拉列表8</li> <li>下拉列表9</li> </ul> </div> </div> </body> <script type="text/javascript"> function dianji(n) { var list = document.getElementById("list"+n); var menu = document.getElementById("menu"+n) if(list.style.display=="none") { document.getElementById("list"+n).style.display="block"; } else { document.getElementById("list"+n).style.display="none"; } } </script>