如何使用HTML和CSS制作下拉菜单

下拉菜单可能正在页面上分级显示分歧种别的项目。假如用户将鼠标悬停正在菜单项上,菜单项下会显示子菜单项目。 咱们仅行使HTML和CSS代码就可能建造如此的菜单。 研习这篇指南后,你就能正在示例上稍作批改,建造属于本身的菜单。其余,咱们为每个环节供应了截图,帮帮你控造建造菜单的要领。 咱们先从HTML代码入手下手研习,稍后再研习CSS样式表一面实质。

建立CSS菜单的HTML代码框架。咱们行使class=“nav”属性的‘div’标签行为菜单的容器。正在截图中,正在图示的HTML代码中,一个纯洁的无序列表(ul)来显露主菜单项。

正在主菜单区域中增加链接。正在本环节中,正在无序列表(ul)每一项上增加链接。

正在“闭于咱们(About Us)”下方LI标签内增加一个无序列表,它代表其子菜单的链接。

正在HTML代码中增加样式表链接。目前咱们依然达成了HTML代码,其实质是一个明了的菜单和子菜单的目标结构构造。咱们行使表置的CSS样式表,因而必要正在代码的‘head’区域增加样式表链接。

建立CSS文献。达成HTML框架代码后,咱们必要行使样式表来完毕下列菜单效用。咱们行使CSS采取器来定位HTML中的菜单项,因而无需正在HTML中增加出格的ID或class属性。咱们通过UL内嵌UL的方法来定位子菜单,并行使display!none;属性 将其荫藏。正在鼠标悬停正在LI元素上时,咱们必要将其转换为block形式,从头显示相应的子菜单,而号召可能定位鼠标悬停地方的LI元素。

行使CSS样式表显示主菜单。position!relative;声明让子菜单按照主菜单相对地方显示。display!inline-block;声明可能将菜缺乏节到符合宽度。图示中的代码正在悬停时,将链接变为深色渐变靠山和白色文字的字体

行使样式表显示子菜单。今朝子菜单样式承担主菜单位素。咱们要让子菜单项笔直显示正在主菜单项下方。

定位下拉菜单,并将菜单项对齐。这将会同时去除灰色靠山。position!relative;声明必需增加到列表项顶端。position!absolute;声明必需增加到相对地方定位的列表中。

本页搜狗指南实质仅代表作家自己看法,若因而形成任何纠葛由作家自己掌管,概与搜狗公司无闭。本页搜狗指南实质仅供参考,请您按照自己实践情形当心操作。加倍涉及您或第三方甜头等事项,请商榷专业人士收拾。如何使用HTML和CSS制作下拉菜单