下拉菜单

下拉菜单

下面我们使用Visual Studio这个软件来写一个小案例，我们可以用写一个简单的方法，就是实现下拉菜单然后弹出二级菜单的一个功能效果。
那么这个代码要怎么写呢，首先我们需要先在界面上写一下的Html的代码，我们来看一下界面的代码是什么。
我们先看一下Html页面的截图：

在截图中我们可以看到界面的代码就是，在一个大的ul的标签里面写了几个li的列表，然后在li列表里面又嵌套一个ul和3个li的列表。 写完了html的代码我们就需要去看一下style给他设置的属性值。看一下style属性代码截图：

从上面可以看到，给这个标签写了一些不少的值，都是一些设置他的美观效果，接着定义好界面的属性代码我们接着就需要写一下代码。然后实现出菜单下拉框的功能效果，见截图：

首先，我们看一下这个代码首先先声明一个list的来接收他querySelectorAll，querySelectorAll的意思就是按文档顺序返回元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空的集合。StopPropagation的意思是终止事件在传播过程的捕获，调用该方法后，该节点处理事件的处理程序被调用，事件不再被分配到其他节点。然后写了一个判断判断他的字符串类是否active。然后就移除他的属性，然后就是一系列的判断。最后就是for循环他，for循环他的i当他等于list就i自加并且让他自动点击侦听事件。

这样就可以实现出来效果功能了接下来看一下实现界面的效果功能：

这样就可以实现菜单下拉框的功能效果。