html css js
* { margin:0; padding:0; } body { margin:20px; } div { position:relative; } ul { list-style-type:none; border:1px solid #ccc; position:absolute; display:none; border-top:none; } li { padding:5px; } li:hover { background-color:#fc0; }
<div> <input type="text" /> <ul> <li>xhtml</li> <li>javascript</li> <li>jquery</li> <li>sql server</li> <li>asp.net</li> <li>c#</li> <li>other</li> </ul> </div>
<script src="Scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $("input").keypress(function () { console.log($(this).val()); $(this).next().show(); }); </script>
http://bbs.csdn.net/topics/390467560
要去掉默认的li的list-style样式
* { margin:0; padding:0; } body { margin:20px; } div { position:relative; } ul { list-style-type:none; border:1px solid #ccc; position:absolute; display:none; border-top:none; } li { padding:5px; } li:hover { background-color:#fc0; }
<div> <input type="text" /> <ul> <li>xhtml</li> <li>javascript</li> <li>jquery</li> <li>sql server</li> <li>asp.net</li> <li>c#</li> <li>other</li> </ul> </div>
<script src="Scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $("input").keypress(function () { console.log($(this).val()); $(this).next().show(); }); </script>