在文本框或文本区域内放置下拉菜单

Question

我正在尝试在使用 HTML 创建的文本框中放置一个 下拉菜单，但我不知道如何为此进行编码。

我找到了一种将图像放置在文本区域内但没有用于下拉菜单的方法。

$('input:text').css('background','#fff url(images/back.png) center right no-repeat');

我的想法是在搜索框中放置一个下拉菜单，以便用户可以选择要搜索的类别。例如：音乐、视频、图片。但选择下拉菜单应该在搜索框内。

我的下拉菜单代码是

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>                </ul>
      </li>

对我正在尝试做的事情有什么建议吗？

Answer 1

扩展@TGH 的答案：

CSS：

#dropdown
{
    position: absolute;
    z-index: 9999;
    top: 50px;
    left: 50px;
    border: 1px solid red;
}
body textarea
{
    width: 500px;
    height: 200px;
    border: 1px solid red;
}

HTML：

<select id="dropdown">
    <option value="1">1</option>
</select>
<textarea></textarea>

JS Fiddle

Answer 2

您可以尝试使用 z-index 和绝对定位来覆盖下拉菜单。 通过 css 为下拉菜单指定绝对定位和 z-index。