用<select>标记可以在表单中方便地插入一个下拉式菜单，以方便用户进行选择，这在制作调查表或用户订单时非常有用，对这种下拉式菜单稍加改造则可以制作出名符其实的下拉式导航菜单。
一、下拉式选择框
这两个示例，外观形式有所不同，但都是用了<select>和<option>标记做出来的，只是设置了不同的参数而已。比较一下它们的源代码，就明白了：
左边的菜单源代码：
<select name="select" size="4" multiple>
<option value="1" selected>选择旅游线路</option>
<option value="2">黄山二日游</option>
<option value="3" >黄山精华游</option>
<option value="4">黄山精品游</option>
<option value="5">黄山四日游</option>
</select>
右边的下拉菜单代码：
<select name="select2" size="1">
<option value="1" selected>选择旅游线路</option>
<option value="2">黄山二日游</option>
<option value="3">黄山精华游</option>
<option value="4">黄山精品游</option>
<option value="5">黄山四日游</option>
</select>
从上面的源代码中可以看出，两个菜单的所有<option>标记的参数设置均相同，所不同的是左边菜单在<select>标记中设置了size="4"，从而使得它一次可以显示四个菜单项。另外，它还设置了multiple参数，从而使得在该菜单上可以选择多项，在选择多项时要同时按下“shift”键。
二、制作导航菜单
这个例子从外观上看与上例没有什么区别，但当你用鼠标点出下拉出的菜单项后，却能链接到相应的网页，也就是说，它是一个名符其实的下拉式导航菜单了，先看看它的源代码有什么变化：
<select name=D1 onchange="location.href=this.options[this.selectedIndex].value" size=1 >
<option selected value="村夫站导航">村夫站导航</option>
<option value="http://go.163.com/~fym888/home.htm">村夫家</option>
<option value="http://go.163.com/~fym888/dwyd.htm">DW 园地</option>
<option value="http://go.163.com/~fym888/flashyd.htm">Flash园地</option>
<option value="http://go.163.com/~fym888/pageabc.htm">网页ABC</option>
<option value="http://go.163.com/~fym888/download.htm">文章下载</option>
</select>
从上面的代码中可看出，value的值中与上例不同，不再是数字，而是网页URL地址，这样一旦你选择一个菜单就相当于获得一个网页地址，但仅有网页地址是不够的。在本例中关键的是这一行代码：onchange="location.href=this.options[this.selectedIndex].value" 这句代码的作用是，一旦选择项发生改变，立即从当前被选择的菜单中获得网页的地址，并链接到这个地址，从而保证了导航功能的实现。
