<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> .xmkc { width: 600px; margin: 0 auto; text-align: center; position: relative; } .wena { display: block; border: 1px solid #ddd; width: 320px; height: 26px; font-size: 12px; line-height: 26px; vertical-align: middle; margin: 0px; padding: 0px; cursor: pointer; } .classlist { width: 320px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; position: absolute; z-index: 1; left: 0px; top: 28px; } .lis { display: block; margin: 0px; padding: 0px; } .lis a { display: block; width: 320px; height: 20px; font-size: 12px; padding-top: 8px; text-align: left; text-decoration: none; color: #333; outline: none; hide-focus: expression_r(this.hideFocus=true); } .lis a:hover { text-decoration: none; background-color: #00f452; color: #fff; } </style> <script type="text/javascript"> function $(x) { return document.getElementById(x); } function sh(x) { $(x).style.display = $(x).style.display ? "" : "none"; } function gets_value(str) { $('whole').value = str; sh('hh'); } </script> <body> <div class="xmkc"> <input name="class" id="whole" type="text" class="wena" onClick="sh('hh')" value="你最喜欢吃的水果是" readonly="readonly" /> <div id="hh" style="display:none" class="classlist"> <div class="lis"><a href="#" onClick="gets_value('香蕉')">香蕉</a></div> <div class="lis"><a href="#" onClick="gets_value('苹果')">苹果</a></div> <div class="lis"><a href="#" onClick="gets_value('梨')">梨</a></div> <div class="lis"><a href="#" onClick="gets_value('水蜜桃')">水蜜桃</a></div> </div> <!--classlist --> </div> <!--xmkc --> </body> </html>