dreamweaver制作下拉框教程：

1、打开一个Dreamweaver项目。双击该项目的文件。如果要创建新的Dreamweaver项目，则可以打开Dreamweaver，依次单击“ 文件”，“ 新建”，然后按照屏幕上的提示进行操作。

2、创建一个有序列表。为了创建一个下拉菜单，您必须至少有一个项目符号项。您可以通过以下方法关闭CSS（单击“ 查看”菜单项，选择“ 样式渲染”，然后单击“ 显示样式”，如果已选中，则单击“ 显示样式”），单击要添加该点的位置，单击“项目符号”图标窗口，然后输入点的名称。然后，您应该先打开CSS，然后再继续。

此处的点名称将用作下拉菜单的激活器（例如，悬停或轻击以打开下拉菜单的按钮）。

如果您已经有要转换为下拉菜单的列表项，请跳过此步骤。

3、确定您的列表名称。单击“ 代码”选项卡，并确保您位于“ 源代码”设置上，然后向下滚动到已排序列表的代码（该代码将位于“ <ul”标记和“ </ ul”标记之间）。顶部“ <ul”标签上方的“ <p id =“ name””标签。引号中的单词是您列表的名称。[1]

如果看不到名称，请在标签上方直接插入标签<p id=”name”（名称是列表的首选名称）<ul。

4、删除项目符号点。通过单击“ 设计”选项卡，然后单击窗口右上角的“ CSS设计器”选项卡，确保您在正确的位置，然后执行以下操作：

单击“选择器”标题右侧的+。

键入#name ul其中“名称”是列表名称的地方。

按↵ Enter两次。

向下滚动并在CSS Designer选项卡底部的窗格中单击list-style-type。

在出现的弹出菜单中单击无。

5、更改您的排序列表以水平显示。为此：

单击“选择器”标题右侧的+。

键入#name li其中“名称”是列表名称的地方。

在“ CSS设计器”选项卡底部的窗格中找到“浮动”标题。

单击“浮动”标题右侧的向左按钮。

6、为您的列表添加一个活动标签。单击“选择器”右侧的+按钮，然后键入#name a（其中“名称”是列表名称），然后按↵ Enter两次。

7、添加背景色。如有必要，选择#name a item，然后单击CSS Designer窗格顶部的框形“ Background color”选项卡，选择background-color选项，然后选择要使用的背景色。

这是下拉列表项将使用的颜色。

8、使您的列表项使用“阻止”格式。这种格式可确保当有人单击或单击列表中的项目时，他们可以通过在项目上方或下方略微选择来打开它，而不必精确选择文本：

确保在CSS设计器标签中选择了您的#name项目。

向下滚动到窗格中的“显示”标题。

单击“显示”标题的最右侧，然后在出现的菜单中单击“ 阻止 ”。

9、如有必要，添加填充。如果您发现列表项彼此卡住，则可以通过执行以下操作在它们之间放置一些空间：

确保在CSS设计器标签中选择了您的#name项目。

向下滚动到窗格中的“填充”标题。

将顶部和底部的“ px”文本字段更改为至少读取5。

将左右“ px”文本字段更改为至少读取10。

10、创建悬停颜色。当您将鼠标光标悬停在下拉菜单中的某个项目上时，将显示以下颜色：

单击“选择器”标题右侧的+。

输入#nave a:hover（其中“名称”是列表名称），然后按↵ Enter两次。

咨询“背景色”标签。

选择背景色，然后选择比您使用的背景色浅的颜色。

11、关闭CSS。单击“ 查看”菜单项，选择“ 样式渲染”，然后在弹出窗口中单击“ 显示样式”选项。

如果“ 显示样式”选项显示为灰色，请单击Dreamweaver文档中的任意位置，然后重试。

12、创建下拉菜单内容。为此，您可以在要用作下拉菜单按钮的项目符号点下方添加子点：

单击要转换为下拉菜单的列表项目右侧的，然后按↵ Enter。

按。Tab ↹

输入第一个下拉菜单项的名称，然后按↵ Enter。

输入下一个下拉菜单的名称，然后按↵ Enter并根据需要重复。

13、将下拉菜单内容绑定到项目符号项。为此：

单击“选择器”旁边的+，然后键入#name ul ul并按↵ Enter两次。

向下滚动并单击显示，然后在弹出菜单中单击无。

查找并单击位置，然后在弹出菜单中单击绝对。

14、自行创建下拉菜单。您必须添加另一个选择器来执行此操作：

单击“选择器”旁边的+，然后键入#name ul li:hover ul并按↵ Enter两次。

查找并单击显示，然后在出现的弹出菜单中单击阻止。

15、使下拉菜单的内容垂直显示。默认情况下，下拉菜单内容将显示在水平栏中，但是您可以通过执行以下操作将其强制为垂直列：

单击“选择器”旁边的+，然后键入#name ul ul li并按↵ Enter两次。

找到“浮动”标题。

单击“浮动”标题右侧的“无”（）选项。

16、保存您的项目。按Ctrl+S（Windows）或⌘ Command+S（Mac）。

如果为此项目创建了新的Dreamweaver文件，则需要输入名称，选择保存位置，然后单击“ 保存”以保存文件。