下面是我做的一个范例，你可以参考一下 lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot；下拉菜单实现代码如下ltHTML ltHEAD ltSCRIPT LANGUAGE=quotjavascriptquot ltSCRIPT ltSCRIPT LANGUAGE=quotjavascriptquot function Body_InitoSelect，oText var iLeft= oSelectoffsetLeftvar iTop = oSelectoffsetTopv；使用HTML和CSS制作下拉菜单的方法如下1编写带有div导航的html代码2使用class=“nav”属性的‘div’标签作为菜单的容器在截图中，在图示的HTML代码中，一个简单的无序列表ul来表示主菜单项3在主菜单区域中；下图是IE8浏览器下的效果整体代码如下lt！DOCTYPE htmllthtmlltheadltmeta charset=quotutf8quot ltstyleselect_diy border2px solid #c1c1c1 borderbottomcolor#d0d0d0borderradius5px padding8px；1首先我们打开html开发工具，新建一个html代码页面2在html代码页面上创建一个select下拉菜单3保存html代码页面，使用浏览器打开，这个时候我们发现select下拉菜单是可以点击修改的4回到html代码页面，在select标签上；如图所示，二级下拉菜单一般都是这样来制作的，就是在li标签里面再放一个ul标签然后就会有这样的效果了，不过距离二级菜单有点差距接着我们先把二级下拉菜单之间的margin和padding值去掉然后设置divulli，需要注意的是；超级文本标记语言英文缩写HTML是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言网页的本质就是超级文本标记语言，通过结合使用其他的Web技术如脚本语言公共网关接口组件等，可以创造出；1创建CSS菜单的HTML代码框架我们使用class=“nav”属性的‘div’标签作为菜单的容器在截图中，在图示的HTML代码中，一个简单的无序列表ul来表示主菜单项2在主菜单区域中添加链接在本步骤中，在无序列表；ltselect定义为下拉列表菜单标签 ltOption定义下拉列表数据标签 ltValue 定义传输的定 实现原理通过代码ltselect设置一个下拉列表菜单，ltoption设计下拉菜单下面的值来达成效果代码源件lthtml lthead ltmeta。

先把导航条做出来，然后在每个想有下拉列表的栏目下，画出来下拉的选项，格式一般为 ltdivltulltlilta1ltaltliltlilta2ltaltliltulltdiv，然后调好样式并将div的style设置，display= 然后获取；select标签可以创建下拉列表，列入 ltselect ltoption value=quot1quot我是下拉项目1ltoption ltoption value=quot2quot我是下拉项目2ltoption ltoption value=quot3quot我是下拉项目3ltoption ltoption value=quot4quot我。

2lta lta href=quot#quot下拉 3lta ltdiv ltli ltul ltscript src=quotscriptjsquotltscript ltbodylthtml CSS stylecssbody fontfamily quotLucida Sans Unicodequot， quotLucid；示例代码如下lt！DOCTYPE HTMLlthtmllthead ltmeta；如果想仅用CSS实现的话，可以考虑把菜单标题和菜单内容放到同一个容器下，然后给这个容器做hover样式，具体请参阅下面示例代码HTMLlt！DOCTYPE htmllthtmllthead ltmeta charset=#39utf8#39ltheadltbody ltdiv。

现在我们为nav添加样式，首先去掉默认的margin和padding，再去掉ltullt li标签的liststyle样式和lta标签的默认下划线接下来再添加适当的样式根据实际需要添加进行美化，如一下样式ltstyle type=quottextcssquot。