Going quietly nuts! New to this. On a spry menu. How do I change the default colour blue of the box in rollover [hover] mode? And also remove the white keyline around it.
Finally, how do I change the width of the drop down boxes. I know how to change the width of entire menu but not the boxes in side it.
Really grateful of any help and restoration of my sanity!
The answer (and comments that help to figure it out!) is the in the CSS file, SpryMenuBarHorizontal.css. I will show the style rules that govern hover states and drop-down widths:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/********************************************************************* **********
LAYOUT INFORMATION: describes box model, positioning, z-order
********************************************************************* **********/
...
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
...
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
...
/********************************************************************* **********
DESIGN INFORMATION: describes color scheme, borders, fonts
********************************************************************* **********/
...
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
And there it is, highlighted in red. Don't get rid of the other styles...I just omitted them so it would be clear which ones you need to change to achieve your 'look.'
Check back if this is unclear.
Beth
North America
Europe, Middle East and Africa
Asia Pacific