下拉菜单可以在页面上分级显示不同类别的项目。如果用户将鼠标悬停在菜单项上,菜单项下会显示子菜单项目。 我们仅使用HTML和CSS代码就可以制作这样的菜单。 学习这篇指南后,你就能在示例上稍作修改,制作属于自己的菜单。此外,我们为每个步骤提供了截图,帮助你掌握制作菜单的方法。 我们先从HTML代码开始学习,稍后再学习CSS样式表部分内容。

HTML

创建CSS菜单的HTML代码框架。我们使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中,在图示的HTML代码中,一个简单的无序列表(ul)来表示主菜单项。
在主菜单区域中添加链接。在本步骤中,在无序列表(ul)每一项上添加链接。
在“关于我们(About Us)”下方LI标签内添加一个无序列表,它代表其子菜单的链接。
在HTML代码中添加样式表链接。