Нужен "Редактируемый выпадающий"

Question

Мне нужно белое поле с серой рамкой, чтобы оно появлялось под этим текстовым полем при нажатии кнопки. В выпадающем меню будет, скажем, от 5 до 10 строк текста, которые имеют внешний вид URL-адреса в верхней части браузера.

Могу ли я сделать это с div?

<script> function $(id) { return document.getElementById(id); } </script>
<input name="media" id="media" type="text" />
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>

<div id="keypad" onmouseout="$('keypad').style.display='none'" style="display:none; background:#FFF; vertical-align:top;">
    Canvas
    Steel
    Vinyl
    Paper
</div>

Answer 1

Простой выпадающий с CSS:

<div id="mine">
  <ul id="nav">
    <li>some title here
      <ul>
        <li>Discription about the title</li>
        <li>as many as you like</li>
      </ul>
    </li>
  </ul>
</div>

и файл CSS:

#nav    {margin: 0;
 padding: 7px 6px 0;
 line-height:100%;}

 #nav ul    {display: none;
 margin: 0;
 padding: 0;
 width:200px;
 position:absolute;
 left:0;
 z-index:2;}

 #nav li:hover > ul  {display: block;}

И, конечно, легко настраивается с помощью CSS.