A simple input box is moved in and the drop-down list is displayed

Because after work, always do JS, so CSS can only be practice. Ha ha

This drop-down list, the width is fixed the best, if not fixed hard to see, so it is best to have the restrictions of the input font.

. Test {width:310px;margin-left:auto;margin-right:auto;position:relative;} . Test Input{width:300px;height:30px;margin-top:100px;} . Test Ul{list-style:none; Display:block;width:300px;position:absolute;left:-35px;top:120px;} . Test UL li{border:1px solid red;width: -%; height:30px;}</style>"text-align:center;padding:0;margin:0"><divclass='Test'> <input type='text'> <ul> <li> no matter love or not love, is the dust of history regardless of love and not love, is the dust of history </li> <li> no matter love and not love, is the dust of history regardless of love and not love, is the dust of history and Lt;/li> <li> no matter love and not love, is the dust of history regardless of love and not love, is the dust of history </li> </ul></div><script type="Text/javascript"Src='Jquery-1.11.js'></script><script type="Text/javascript">    $(". Test input"). Hover (function () {$ (". Test UL"). Show (); },function () {//$ (". Test ul"). Hide ();    });</script>

A simple input box is moved in and the drop-down list is displayed