Tell me how to make the form with the search results displayed under the search input, as on Twitter. (I looked at the source code - everything is in one div). The question itself is how to make the block be under the input, and the input in <li> . (After the menu itself is a li list, shrinking the browser window shrinks). The goal is to make it so that it is div below the input, which is in the menu <li> tag (after the div should be, not in the menu and below it). Thank you in advance! Here is an example of what a picture should look like.

alt text

    2 answers 2

    If you mean that when typing a phrase in the search field, possible results automatically appear, then this is nothing but jQuery UI Autocomplete . For example, on this demo page , start typing the names of the birds (in English) - crow (crow) or eagle (eagle) - and see the result of the work.

    • one
      In the search results you can get bad as I understand it and the picture with the user's photo - OverLoader
    • @OverLoader, Any information: text, links, graphics, etc. - Deonis
    • one
      And what is being used on Twitter? - OverLoader
    • one
      @OverLoader, considering that they use jQuery, it can be assumed that Autocomplete is also used. Although organizing this process knowing ajax is not that difficult. - Deonis
    • one
      Thank you so much! Understood! - OverLoader

    The pop-up block should be absolutely positioned relative to the menu item, when hovering over which, the menu itself pops up. Consequently, the pop-up block in styles must have position:absolute and "shift" down to the height of the menu item, and in order for positioning to occur relative to the parent block, the menu item must have position:relative .

    CSS :

     .menu,.menu li,.under-menu li{ display:block; height:20px; } .menu li{ float:left; position:relative; } .under-menu li{ float:none; } .under-menu{ position:absolute; top:20px; left:0; display:none; } .menu li:hover .under-menu{ display:block; }

    HTML :

     <ul class="menu"> <li> Пункт #1 </li> <li> Пункт #2 <ul class="under-menu"> <li>Подпункт 1</li> <li>Подпункт 2</li> <li>Подпункт 3</li> <li>Подпункт 4</li> <li>Подпункт 5</li> </ul> </li> </ul>

    A good example .