Operation Manual

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
Legal Notices | Online Privacy Policy
a:focus
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;
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.
Position submenus
The position of Spry Menu Bar submenus is controlled by the margin property on submenu ul tags.
1. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
2. Change the margin: -5% 0 0 95%; default values to the desired values.
Spry Menu Bar tutorial
The CSS Styles panel in Current mode
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;
261