使用HTML和CSS制作下拉菜单的方法如下：
1、编写带有div导航的html代码：
2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
5、制作导航css：
代码：
效果图：
代码含义：
<select>定义为下拉列表菜单标签
<Option>定义下拉列表数据标签
<Value>定义传输的定
实现原理：
通过代码<select>设置一个下拉列表菜单，<option>设计下拉菜单下面的值来达成效果。
代码源件：
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题</title>
</head>
<body>
<form action="" method="get">
<label>下拉列表菜单</label>
<select>
<option value="0">下拉选项1</option>
<option value="1">下拉选项2</option>
</select>
</form>
</body>
</html>
下拉菜单实现代码如下：<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
</SCRIPT>
<SCRIPT LANGUAGE="javascript">
function Body_Init(oSelect,oText)
{
var iLeft= oSelect.offsetLeft
var iTop = oSelect.offsetTop
var iWidth=oSelect.clientWidth
var iHeight=oSelect.clientHeight
oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')'
oText.style.width=iWidth
oText.style.height=iHeight
oText.style.top =iTop
oText.style.left=iLeft
}
function Combo_Select(oSelect,oText)
{
oText.value=oSelect.options[oSelect.selectedIndex].text
alert(oText.value)
}
function Text_ChkKey(oSelect,oText)
{
if(event.keyCode==13)
{
var nIndex=HasTheValue(oText.value,oSelect)
if(nIndex !=-1 &&nIndex !=oSelect.selectedIndex)
{
oSelect.selectedIndex=nIndex
}
}
}
function HasTheValue(name,oSelect)
{
if(oSelect.options.length<1)
return -1
var i=0
for(i=0i<oSelect.options.lengthi++)
{
if(oSelect.options[i].text==name)
return i
}
return -1
}
</SCRIPT>
</HEAD>
<BODY onload="javascript:Body_Init(pCombo,pText)">
<table width=50% width=50% align="center" valign="middle">
<tr><td>
<SELECT STYLE="position:absoluteleft:0top:0" ONCHANGE="Combo_Select(this,pText)" NAME="pCombo" >
<option value="d">test1</option>
<option value="dd">test2</option>
<option value="dd">asds</option>
<option value="dd">awdfsfs</option>
</SELECT>
<INPUT STYLE="position:absolute" onKeyPress="Text_ChkKey(pCombo,this)" TYPE="TEXT" NAME="pText">
</td></tr>
</table>
</BODY>
</HTML>
