级联样式表（CSS）是一个名称，用于描述超文本标记语言（HTML）或可扩展标记语言（XML）文档的格式化方式。它可以用于任何类型的XML文档，但最常用于用HTML编写的网页。CSS可用于在网页上创建下拉菜单。下拉式CSS菜单显示单个文本项，直到访问者使用鼠标悬停在菜单上，此时将显示整个项目列表。菜单是使用CSS标识和类标记创建的。

下拉CSS菜单以ID选择器开始。此选择器看起来像#。后面是ID的名称。您可以将ID命名为任何名称，但它应该是描述性的，以便其他人可以阅读您的代码。例如，下拉菜单可以使用代码#drop1。

使用类选择器（看起来像句点）为下拉菜单中的第一项创建类。该类将是HTML列表元素的一部分。列表元素由字符“li”指定。通过键入“li.top”创建顶级类。类描述包含在两个大括号之间。

以下示例显示列表中第一项的完整CSS代码：

#drop1 li.top{字体系列：Verdana，Geneva，san serif；&#13；字体大小：100%；&#13；颜色：#FF00FF；}

接下来，为将隐藏在CSS菜单第一个项下的项创建一个类。该类将描述用字符“ul”指定的HTML无序列表。该描述看起来基本上与顶级菜单项相同，在描述的开头添加了“display:none#59”字样。这表示无序列表中的项目将被隐藏，直到指针悬停在CSS下拉菜单上


以下是CSS代码这一部分的示例：

#drop1 ul.link{&#13；显示：无#59&#13；字体系列：Verdana，Geneva，san serif；&#13；字体大小：100%；&#13；颜色：#FF00FF；}

您将希望CSS下拉菜单显示在HMTL文档的其余部分上。否则，当访问者将鼠标悬停在菜单上时，它会将文档的其余部分向下推，以便为列表腾出空间。将position元素设置为absolute将执行此操作。

设置位置的代码为：

#drop1{位置：绝对；}

这就是下拉菜单的CSS部分所需的全部内容。CSS下拉菜单的其余部分使用“div”、“id”、“class”、“li”和“ul”元素在HTML文档中创建。“div”标记分隔文档的菜单部分。键入以创建下拉菜单部分。然后使用HTML“ul”元素启动无序列表。

将顶级类添加到第一个列表项中，并将链接类添加到其余项中。HTML代码应类似于：


&书信电报；li class=“top”&gt；顶级项目&lt/李&gt
 &书信电报；li class=“link”&gt&书信电报；a href=“#”&gt；项目&lt/a&gt&lt/李&gt
 &书信电报；li class=“link”&gt&书信电报；a href=“#”&gt；项目&lt/a&gt&lt/李&gt
 &书信电报；li class=“link”&gt&书信电报；a href=“#”&gt；项目&lt/a&gt&lt/李&gt
 &lt/ul&gt&lt/部门&gt；

在web浏览器中打开文档时，下拉CSS菜单将作为单个项目显示在页面上。将鼠标移到顶部项目上时，将显示菜单的其余部分。页面上的其余文本不会移动，但菜单会隐藏部分文本。