spry下拉菜单

（可选）如果页面中不再包含任何其它水平菜单栏构件，请从文档头中删除指向先前 MenuBarHorizontal.css 类的链接。
保存该页面。
自定义菜单栏构件
尽管使用属性检查器可以简化对菜单栏构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改菜单栏构件的 CSS 规则，并创建根据自己的喜好设置样式的菜单栏构件。有关样式任务的更高级列表，请访问 /go/learn_dw_sprymenubar_custom_cn。
在菜单栏的代码后面，查找菜单栏构造函数： var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
添加或删除菜单和子菜单
使用属性检查器（“窗口”>“属性”），向菜单栏构件中添加菜单项或从中删除菜单项。
添加主菜单项
在“文档”窗口中选择一个菜单栏构件。
在属性检查器中，单击第一列上方的加号按钮。
（可选）重命名新菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。
添加子菜单项
ul.MenuBarVertical a、ul.MenuBarHorizontal a
background-color: #EEE;
当鼠标指针移过背景上方时，背景的颜色
ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover
background-color: #33C;
有关菜单栏构件工作方式的更全面的说明（包括菜单栏构件代码的全面分析），请访问 /go/learn_dw_sprymenubar_cn。
有关创建 Spry 菜单栏的教程，请访问 /go/vid0168_cn。
插入菜单栏构件
选择“插入”>“Spry”>“Spry 菜单栏”。
Spry DW JavaScript 菜单栏构件（目标属性）2010年07月02日 星期五 8:21 P.M.关于菜单栏构件
菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。
更改菜单项的尺寸
可以通过更改菜单项的 li 和 ul 标签的 width 属性来更改菜单项尺寸。
找到 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 规则。
从构造函数中删除 imgDown 预先加载选项（和逗号）： var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
注： 如果将垂直菜单栏转换为水平菜单栏，则添加 imgDown 预先加载选项和逗号。
在文档的直接父框架集中加载所链接的文档。
_top
在框架集的顶层窗口中加载所链接的页面。
关闭样式
您可以禁用菜单栏构件的样式，以便可以在“设计”视图中更清楚地查看构件的 HTML 结构。例如，当您禁用样式时，菜单栏项以项目符号列表形式显示在页面上，而不是显示为菜单栏中构件。
在属性检查器（“窗口”>“属性”）中单击“禁用样式”按钮。
更改菜单栏构件的方向
可以将菜单栏构件的方向从水平更改为垂直或者从垂直更改为水平。您只需修改菜单栏的 HTML 代码并确保 SpryAssets 文件夹中有正确的 CSS 文件。
下例将水平菜单栏构件更改为垂直菜单栏构件。
color: #FFF;
具有焦点的文本的颜色
ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus
color: #FFF;
当鼠标指针移过菜单栏项上方时，菜单栏项的颜色
ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover
默认文本
ul.MenuBarVertical a、ul.MenuBarHorizontal a
color: #333; text-decoration: none;
当鼠标指针移过文本上方时，文本的颜色
ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover
在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中，选择要应用链接的菜单项的名称。
在“链接”文本框中键入链接，或者单击文件夹图标以浏览到相应的文件。
创建菜单项的工具提示
在“文档”窗口中选择一个菜单栏构件。
在属性检查器（“窗口”>“属性”）中，选择要为其创建工具提示的菜单项的名称。
在“文档”窗口中选择一个菜单栏构件。
在属性检查器中，选择要向其中添加子菜单的主菜单项的名称。
单击第二列上方的加号按钮。
（可选）重命名新的子菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。
要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。
具有焦点的背景的颜色
ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus
background-color: #33C;
当鼠标指针移过菜单栏项上方时，菜单栏项的颜色
ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover
删除垂直菜单栏。
在“代码”视图（“视图”>“代码”）中，找到 MenuBarHorizontal 类，将其更改为 MenuBarVertical。MenuBarHorizontal 类是在菜单栏 (<ul id="MenuBar1" class="MenuBarHorizontal">) 的容器 ul 标签中定义的。
在属性检查器（“窗口”>“属性”）中，选择要分配目标属性的菜单项的名称。
在“目标”框中输入以下四个属性之一：
_blank
在新浏览器窗口中打开所链接的页面。
_self
在同一个浏览器窗口中加载所链接的页面。这是默认选项。如果页面位于框架或框架集中，该页面将在该框架中加载。
_parent
Dreamweaver 允许您插入两种菜单栏构件：垂直构件和水平构件。下例显示一个水平菜单栏构件，其中的第三个菜单项处于展开状态：
查看完全大小图形 菜单栏构件（由 <ul>、<li> 和 <a> 标签组成）
A.
菜单项具有子菜单
B.
子菜单项具有子菜单
菜单栏构件的 HTML 中包含一个外部 ul 标签，该标签中对于每个顶级菜单项都包含一个 li 标签， 而顶级菜单项（li 标签）又包含用来为每个菜单项定义子菜单的 ul 和 li 标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。
更改菜单项的文本样式
附加到 <a> 标签的 CSS 中包含有关文本样式的信息。还可以向与不同菜单状态有关的 <a> 标签附加多个相关的文本样式类值。
要更改菜单项的文本样式，请使用下表来查找相应的 CSS 规则，然后更改默认值： 要更改的样式
垂直或水平菜单栏的 CSS 规则
相关属性和默认值
注： Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。
删除主菜单项或子菜单项
在“文档”窗口中选择一个菜单栏构件。
在属性检查器中，选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。
更改菜单项的顺序
在“文档”窗口中选择一个菜单栏构件。
在 Dreamweaver 中，打开包含水平菜单栏构件的页。
插入垂直菜单栏构件（“插入”>“Spry”>“Spry 菜单栏”）并保存页面。此步骤可确保在站点中包含与垂直菜单栏相对应的正确的 CSS 文件。 注： 如果站点中的其它位置中已有垂直菜单栏构件，则不必插入新的垂直菜单栏构件， 只需将 SpryMenuBarVertical.css 文件附加到该页面，方法是在“CSS 样式”面板（“窗口”>“CSS 样式”）中单击“附加样式表”按钮。
background-color: #33C;
当鼠标指针移过子菜单项上方时，子菜单项的颜色
ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-color: #33C;
在“标题”文本框中键入工具提示的文本。
指定菜单项的目标属性
目标属性指定要在何处打开所链接的页面。例如，可以为菜单项分配一个目标属性，以便在站点访问者单击链接时，在新浏览器窗口中打开所链接的页面。如果您使用的是框架集，则还可以指定要在其中打开所链接页面的框架的名称。
在“文档”窗口中选择一个菜单栏构件。