如何创建亚马逊上显示的下拉菜单？

Question

我对Web开发有点新意。我正在尝试创建一个下拉菜单。这是这样的：

<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

但这不是我想要的。我想创建一个非常类似于Amazon.com上的下拉列表（“搜索”旁边的下拉列表），如下图所示。因此，每当用户点击按钮时，列表将作为文本显示在按钮中。

Answer 1

首先，请查看http://www.codecademy.com对HTML，CSS，JavaScript以及（更重要的是jQuery）的简要介绍。在粗略了解jQuery和CSS之后，您可以轻松地创建此效果。

http://jquery.com/

Answer 2

如果您只需要在用户点击按钮时显示下拉菜单，那么最好在jquery中执行此操作。请执行下面的操作

<script type="text/javascript" >
$("#downarrow").click(function(){
$("#dropdown").show();
})
</script>

<div id="downarrow"></div>
<div id="dropdown" style="display:none;">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> 
</div>