标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。由于Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。
(3)为每个菜单项目定义对应的超链接
由于Dreamweaver生成的是标准的HTML标签和CSS样形文件，因此可以直接在源文件视图中修改菜单项目的文字和目标超链接。只需要在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”>“属性”)中，选择要应用链接的菜单项的名称。在“链接”文本
杨教授工作室，版权所有，盗版必究， 7/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料框中键入链接，或者单击文件夹图标以浏览到相应的文件。
采用无序列表ul和li组成菜单结构，并设置li中的a的display为block。、可以在属性面板中修改相关的CSS属性项目和显示的风格 7
8、为各个菜单项添加动态帮助提示信息(ToolTip帮助信息)
在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”>“属性”)中，选择要为其创建工具提示的菜单项的名称。在“标题”文本框中键入工具提示的文本。
杨教授工作室，版权所有，盗版必究， 8/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
9、测试现在的效果
(1)允许浏览器执行其中的JavaScript脚本程序
(2)最终的结果如下
由于Spry 菜单栏组件使用DHTML层实现将菜单显示在其它的HTML标签实体所代表的内容的上方。如果页面中包含有Flash内容，可能会出现问题。因为Flash 影片总是显示在所有其它 DHTML 层的上方，此问题的解决方法是，更改 Flash 影片的参数，让其使用 wmode="transparent"。
1.1.2 自定义菜单栏组件的显示风格(修改CSS文件)
1、可以直接对SpryMenuBarHorizontal.css文件进行修改满足项目的特殊要求
尽管使用属性检查器可以简化对菜单栏构件的编辑，但是属性检查器并不支持自定义的样式设置任务。但可以通过修改菜单栏组件的 CSS文件中特定的样式规则，并创建根据自己的喜好、设置菜单栏的样式。
基本的实现原理也就是修改SpryMenuBarHorizontal.css 或SpryMenuBarVertical.css 文件中的默认定义的规则。
2、改变菜单的对齐形式的实现示例
(1)水平菜单省缺是放置在页面的左边的
, 如果希望将它放到页面的右边对齐。在CSS视图窗口中可以点击:
ul.MenuBarHorizontal li项目，然后在下面的属性面板中，点击float项右边的下拉列
表，将left换为right——将每个菜单项目“右对齐”。
杨教授工作室，版权所有，盗版必究， 9/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
, 再修改ul.MenuBarHorizontal的显示风格为“右对齐”——新增一个“float:right;”
项目
ul.MenuBarHorizontal{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
float:right;
}
(2)再测试修改后的效果——现在菜单被对齐到页面的右边了
杨教授工作室，版权所有，盗版必究， 10/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
当然，也可以双击ul.MenuBarHorizontal li，在打开的CSS规则面板中设置菜单项的格式。
3、改变页面刚加载时的超链接的文本的颜色的实现示例
1)需要修改"ul.MenuBarHorizontal a."属性项目的定义 (
而如果想修改当鼠标移到连接上时连接的背景和文本颜色，那么应该修改"ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.Menu…."属性项目的定义。
当然，如果所建立的是垂直的菜单，那么MenuBarHorizontal将是MenuBarVertical。 (2)默认文本的颜色主要是由“ul.MenuBarVertical a”或者“ul.MenuBarHorizontal a”属性项目控制定义
默认的值为“color: #333; text-decoration: none;”，修改该值就可以达到改变菜单的文本的颜色。
(3)修改当鼠标指针移过文本上方时文本的颜色
主要是由“ul.MenuBarVertical a:hover”或者“ul.MenuBarHorizontal
a:hover”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
(4)修改具有焦点的文本的颜色
主要是由“ul.MenuBarVertical a:focus”或者“ul.MenuBarHorizontal
a:focus”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
(5)修改当鼠标指针移过菜单栏项上方时菜单栏项的颜色
杨教授工作室，版权所有，盗版必究， 11/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
主要是由“ul.MenuBarVertical a.MenuBarItemHover”或者
“ul.MenuBarHorizontal
a.MenuBarItemHover”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
(6)修改当鼠标指针移过子菜单项上方时子菜单项的颜色
主要是由“ul.MenuBarVertical”和“a.MenuBarItemSubmenuHover”或者“ul.MenuBarHorizontal”和“a.MenuBarItemSubmenuHover”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
4、改变页面刚加载时的超链接的文本背景颜色的实现示例
(1)修改默认的背景颜色
主要是由“ul.MenuBarVertical a”或者“ul.MenuBarHorizontal a”属性项目控制定义，默认的值为“background-color: #EEE;”，修改该值就可以满足要求。
(2)修改当鼠标指针移过背景上方时背景的颜色
主要是由“ul.MenuBarVertical a:hover”或者“ul.MenuBarHorizontal
a:hover”属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。
3)修改具有焦点的背景的颜色 (
主要是由“ul.MenuBarVertical a:focus”或者“ul.MenuBarHorizontal
a:focus”属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。
(4)修改当鼠标指针移过菜单栏项上方时菜单栏项的背景颜色
主要是由“ul.MenuBarVertical a.MenuBarItemHover”或者
“ul.MenuBarHorizontal
a.MenuBarItemHover” 属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。
(5)修改当鼠标指针移过子菜单项上方时子菜单项的背景颜色
主要是由“ul.MenuBarVertical a.MenuBarItemSubmenuHover”或者
“ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover”属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。
5、修改菜单文字的字体的实现示例
(1)Spry菜单缺省的字体是与标签或最近一层父级标签元素的字体是一样的
杨教授工作室，版权所有，盗版必究， 12/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
但可以通过修改"ul.MenuBarHorizontal."属性项目重新设置，只需要在CSS
样式面板中双击"ul.MenuBarHorizontal."属性项目以打开CSS规则定义设置的面板，设置一个新的字体。 (2)如下图所示
6、调整菜单项的宽度实现的示例
(1)可以通过修改"ul.MenuBarHorizontal li."属性项目达到修改菜单项的宽度
可以通过更改菜单项的
