Operation Manual

408
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Change the background color of a menu item
The CSS attached to the <a> tag contains the information for a menu item’s background color. There are also several
relevant background color class values attached to the <a> tag that pertain to different menu states.
❖ To change the background color of a menu item, use the following table to locate the appropriate CSS rule, and then
change the default value:
Change the dimension of menu items
You change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
1 Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
2 Change the width property to a desired width (or change the property to auto to remove a fixed width, and add the
property and value
white-space: nowrap; to the rule).
3 Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
4 Change the width property to a desired width (or change the property to auto to remove a fixed width).
5 Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule:
6 Add the following properties to the rule: float: none; and background-color: transparent;.
7 Delete the width: 8.2em; property and value.
Style to change CSS rule for vertical or horizontal menu bar Relevant properties and default values
Default text
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
color: #333; text-decoration: none;
Text color when mouse pointer moves over it
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
color: #FFF;
Text color when in focus
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
color: #FFF;
Menu Bar item color when mouse pointer
moves over it
ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
color: #FFF;
Submenu item color when mouse pointer
moves over it
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
color: #FFF;
Color to change CSS rule for vertical or horizontal menu bar Relevant properties and default values
Default background
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
background-color: #EEE;
Background color when mouse pointer
moves over it
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
background-color: #33C;
Background color when in focus
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
background-color: #33C;
Menu Bar item color when mouse pointer
moves over it
ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
background-color: #33C;
Submenu item color when mouse pointer
moves over it
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
background-color: #33C;