代码动图 如何使用HTML、css、js制作树状图（下拉框）？

如何使用HTML、css、js制作树状图（下拉框）？

首先，您需要打开计算机上的DW软件，创建一个新的HTML页面，然后将其保存在桌面上。

接下来，我们需要在正文中添加div标签，并使用UL unordered list和Li标签创建一级菜单栏。代码和浏览器效果如下图所示。

由于菜单栏通常是链接的，因此我们需要为每个Li标签添加一个标签，并添加适当的样式。使鼠标移动到有明显颜色变化的链接上。

到最后一步，我们的第一级菜单栏已经制作完成。接下来，我们需要制作第二级菜单栏。我们在第一级菜单栏的Li标签下加上UL和第二级菜单栏的Li标签，然后再加上Li标签制作第二级菜单。

二级菜单的代码和CSS样式以及浏览器中的显示效果如下图所示。

如您所见，这是一个静态辅助菜单。辅助菜单将始终显示在网页上。如何先隐藏它，然后在显示它之前将鼠标滑过主菜单？

实际上，我们只需要为二级菜单的UL标签设置显示的none和block属性。默认情况下，secondary UL的display属性设置为none，当鼠标悬停时display属性设置为block。

这样，二级菜单就完成了。如果我们想在其他主菜单下有一个辅助菜单，我们只需要复制相应的代码。

河南新华计算机学院网络运行协会为您解答

代码动图 代码结构图 树状分析图

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。