在很多网站都有看到下拉框的功能，让我们一起来看看html如何制作下拉框。
01新建一个html文件。如图
02在html页面找打body标签，在这个标签里新建select标签，在select标签内创建option标签并设置内容。如图
代码：
<select>
<option>-请选择-</option>
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
03保存好html文件后使用浏览器打开，即可看到效果。如图：
04所有代码。可直接把所有代码复制到html文件上运行即可看到效果。如图：
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉选择框</title>
</head>
<body>
<select>
<option>-请选择-</option>
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</body>
</html>
在html中，获得下拉列表的值，可以通过select对象的value属性取得，操作方法如下。
设备：联想电脑
系统：win8
软件：js2.14
1、首先新建一个html文件，命名为test.html，在test.html页面，创建一个form表单，下面将通过form表单对象来取得selet下拉框的值。
2、在form表单里面，创建一个select下拉框列表，其选项有三个，分别是选择一，选择二，选择三，三个选项分别有不同value值。
3、在form表单的下面，创建一个button按钮，并给它绑定一个onclick点击事件，当按钮被点击时，执行getvalue（）函数。
4、在getvalue（）函数内，通过document对象获得表单myForm下面的mySelect下拉列表对象，并通过其value属性取得选中选项的值。
5、然后在getvalue（）函数内，将获得的下拉列表选项的值，通过alert()方法以弹窗的形式显示出来。
6、最后在浏览器打开test.html页面，选择下拉列表的值，点击按钮，获得选项的值。
方法如下：
方法一：
HTML
1、创建CSS菜单的HTML代码框架。我们使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
2、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
3、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
4、在HTML代码中添加样式表链接。目前我们已经完成了HTML代码，其内容是一个清晰的菜单和子菜单的层次布局结构。我们使用外置的CSS样式表，因此需要在代码的‘head’区域添加样式表链接。
方法二：
CSS
1、创建CSS文件。完成HTML框架代码后，我们需要使用样式表来实现下列菜单功能。我们使用CSS选择器来定位HTML中的菜单项，因此无需在HTML中添加额外的ID或class属性。
我们通过UL内嵌UL的方式来定位子菜单，并使用display:none属性 将其隐藏。
在鼠标悬停在LI元素上时，我们需要将其转换为block模式，重新显示相应的子菜单，而>命令可以定位鼠标悬停位置的LI元素。
2、使用CSS样式表显示主菜单。
position:relative声明让子菜单根据主菜单相对位置显示。
display:inline-block声明可以将菜单调整到合适宽度。
3、设置鼠标悬停时的字体渐变颜色。图示中的代码在悬停时，将链接变为深色渐变背景和白色文字的字体。
4、使用样式表显示子菜单。当前子菜单样式继承主菜单元素。我们要让子菜单项垂直显示在主菜单项下方。
5、定位下拉菜单，并将菜单项对齐。这将会同时去除灰色背景。
position:relative声明必须添加到列表项顶端。
position:absolute声明必须添加到相对位置定位的列表中。
下拉菜单
在计算机应用中，下拉式选单是选单的一种表现形式。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其 他选项的另一个选单。下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中，并把这个下拉式选单置于主选单的一个选项下。下拉菜单内的项 目可以据需要设置为多选或单选，可以用来替代一组复选框（设置为多选）或单选框（设置为单选）。这样比复选框组或单选框组的占用位置小，但不如它们直观。
