1、如图所示，二级下拉菜单一般都是这样来制作的，就是在li标签里面再放一个ul标签然后就会有这样的效果了，不过距离二级菜单有点差距接着我们先把二级下拉菜单之间的margin和padding值去掉然后设置divulli，需要注意的是，是子代选择器因为我们不需要全部的li左浮动如图，浮动后就成了，距离二级菜单。

2、1首先打开sublime编译器，然后创建后缀名为html的文件，并写入基本网页结构2在div容器中写入最基本的菜单结构，使用列表进行构建3将列表添加class属性，并使用CSS属性去掉列表和a标签的样式4设置第一级菜单的大小和宽度高度，以及文字居中5二级菜单栏设置边框和背景颜色6当鼠标滑过的。

3、* 2 设置水平方向主菜单， 设置子菜单弹出位置相对于当前父菜单项 * li float left * 产生水平菜单 * position relative * position为非static时才能让子菜单弹出位置相对当前菜单项 * width 10em * 给菜单项设置宽度 * * 3 设置二级菜单默认为隐藏状态， 设置弹出时。

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

5、像这样，一个菜单横向菜单就建好了，下来我们给栏目一，栏目二，栏目三，添加二级下拉菜单 ltdiv class=quotnavquot ltul ltlilta href=quot#quot栏目一lta ltul ltlilta href=quot#quot二级栏目ltaltli ltlilta href=quot#quot二级栏目ltaltli ltlilta href=quot#quot二级栏目ltaltli lt。

6、ltli class=quotnavliquot一级菜单项 ltdiv class=quotboxquot二级菜单项ltdiv ltli ltul 接着，我们使用jQuery来编写JavaScript代码，实现菜单的延迟下拉效果以下是JavaScript代码function #39navli#39hoverfunction thischildren#39divbox#39stoptrue，truedelay1000slideDown。

7、首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示因为菜单栏一般都是有链接的，我们就需要为每个li标签添加一个a标签，并增加适当的样式。

8、设置二级菜单的zindex属性，在style下面的 zindex 属性设置元素的堆叠顺序拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面注释元素可拥有负的 zindex 属性值注释Zindex 仅能在定位元素上奏效例如 positionabsolute。

9、shangkeitcomquot target=quot_blankquot二级导航4lta ltli ltul ltli ltul ltdivltbodylthtml复制上面代码，保存到后缀为html或者htm的文件中，用浏览器打开就可以看到效果效果图如下。

10、看到网站的导航按钮很炫酷不会怎么办本片教程介绍如何使用css制作网站导航横排二级下拉菜单 打开Notepad++，先输入个页面框架 DOCTYPE html html xmlns=#34#34 hade hade body body 框架好了，那么就该定义页面的title，关键词keyword，和描述description meta。

11、在这里给你看下我以前的写的一个代码 lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot lthead lttitle简洁实用的二级下拉导航菜单lttitle ltmeta。

12、选项2option #160option value=quotoption3quot选项3optionselect 这样，当用户选择一个选项并提交表单时，选中的选项值将作为名称为 myDropdown 的参数传递给服务器以上是创建简单HTML下拉菜单的基本步骤您可以根据需要自定义下拉菜单的样式和行为，例如添加CSS样式或JavaScript事件处理程序。

13、下拉菜单实现代码如下ltHTML ltHEAD ltSCRIPT LANGUAGE=quotjavascriptquot ltSCRIPT ltSCRIPT LANGUAGE=quotjavascriptquot function Body_InitoSelect，oText var iLeft= oSelectoffsetLeftvar iTop = oSelectoffsetTopvar iWidth=oSelectclientWidthvar iHeight=oSelectclientHeight。

14、实现原理通过代码ltselect设置一个下拉列表菜单，ltoption设计下拉菜单下面的值来达成效果代码源件lthtml lthead ltmeta。

15、quot#main_menu li，#main_menu ddquotbindquotmouseoverquot， function 顶级菜单项的鼠标移入操作 thischildrenquotdlquotsiblingsquotaquotattrquotclassquot， quothover_aquot 赋于一级菜单类名 thischildrenquotdlquotstoptrue， trueslideDownquot100quot 下拉二级菜单 bindquot。

16、使用HTML和CSS制作下拉菜单的方法如下1编写带有div导航的html代码2使用class=“nav”属性的‘div’标签作为菜单的容器在截图中，在图示的HTML代码中，一个简单的无序列表ul来表示主菜单项3在主菜单区域中添加链接在本步骤中，在无序列表ul每一项上添加链接4在“关于我们。

17、答案使用HTML和CSS可以制作下拉菜单下面是一个简单的制作步骤详细解释1 HTML结构 首先，我们需要创建HTML的基础结构对于下拉菜单，通常使用``和``标签来定义选项例如html 选项1 选项2 选项3 这里的`id`属性对于后续CSS样式化很重要2 CSS样式化 接下来，通过CSS对下拉菜单进行样式化。