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

Question

我对网络开发有点陌生。我正在尝试创建一个下拉菜单。这类似于：

<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.comHTML以了解其对、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>