MenuBar - Submenu Indicator

I've gone over the Spry sample menubar code carefully and I
just don't see how this all works. In the samples, whenever a menu
has a submenu there is a black indicator present. On mouse over,
the black indicator changes to white. In my code, I get the white
indicator on mouse over; but, the black indicator is not present at
any time. I don't find this too surprising because I don't have a
black indicator image present anywhere nor do I have such an image
referenced anywhere. As far as I can see, the sample Spry code
doesn't have a black indicator image or any such reference either,
yet the Spry sample code works and mine doesn't. Could someone
please explain this to me (i.e., what I have to do to get the black
submenu indicator to appear)? I would really appreciate it. BTW, my
setup can be seen at
http://www.simpson-rich.com/main.
Thanks for any help.
... doug

First docs:
http://livedocs.adobe.com/flex/3/langref/mx/controls/MenuBar.html
Default component is
mx.controls.treeClasses.DefaultDataDescriptor
so you can see in sorce realization.
It should reazile interface http://livedocs.adobe.com/flex/3/langref/mx/controls/menuClasses/IMenuDataDescriptor.html

Similar Messages

Remove UPS Menubar Battery Indicator

I just got a new MacBook Pro, upgrading from an iMac G5. I have had a backup UPS battery from my old computer. My problem is that the menubar battery indicator displays both my internal battery and the UPS. I don't want to have the UPS in the menubar, mainly because when I have it set to show the time remaining, the UPS show "Unknown time," which takes up a lot of room. Is there any way I can just show the internal battery.

I found the program SlimBatteryMonitor (http://www.orange-carb.org/SBM/). It is designed to take up less room. It lets you choose to show only batteries or UPS's (what I wanted), but it also can show, for example, a percentage when the battery is charging, a time when it is discharging, and only an icon when it is charged. And it's in color!
The only drawback is that it is on the far left side of the menubar icons, but I can deal with that for a skinnier battery indicator.

Menubar submenu centering problems

I just downloaded the spry widgets today to use the menubar
in a webpage. I need the menu items to be centered but the submenus
to be on the left. Unfortunately while it works in Firefox it does
not work in IE7. In IE the menu items on top are centered but the
submenus shift over to the right with the left edge of the submenu
directly under the center of it's parent menu item. I checked the
Menu
Bar Styling Examples thread but nothing I tried seemed to work
(ironically i accidentally commented out the ul.MenuBarHorizontal
li.MenuBarItemIE css and it did align correctly in ie even though
it caused other problems)
Here's the html code I'm using in the page that contains the
menubar along with any css for the menu bar in the actual page:
quote:
<style type="text/css">
ul.MenuBarHorizontal li
width: 103px;
text-align:center;
font-size:11px; border:none;
ul.MenuBarHorizontal ul li
width: 150px;
text-align:left; font-size:11px; border:none;
ul.MenuBarHorizontal a
text-align:center; background-color:#9ACABE; color:#FFFFFF;
font-weight:bold; font-family:arial;
ul.MenuBarHorizontal ul a {
text-align: left;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003377;
text-decoration:underline;
</style>
****START OF HTML CODE****
<td valign="middle" height="25px" align="center"
bgcolor="#9ACABE">
<table cellpadding=0 cellspacing=0 width="100%"
align="center">
<tr valign="middle" align="center">
<td align="center" valign="middle">

<ul id="menubar1" class="MenuBarHorizontal">
<li><a href="about.html">ABOUT
US</a></li>
<li><a class="MenuBarItemSubmenu"
href="services.html">SERVICES</a>
<ul>
<li><a href="itServices.html">Information
Technology</a></li>
<li><a
href="consultServices.html">Consulting</a></li>
<li><a href="accountServices.html">Customer
Support</a></li>
<li><a href="softwareEngineering.html">Software
Engineering</a></li>
<li><a href="immunization.html">Immunization
Registry</a></li>
<li><a
href="products.html">Products</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu"
href="alliances.html">ALLIANCES</a>
<ul>
<li><a
href="customers.html">Customers</a></li>
<li><a
href="partners.html">Partners</a></li>
<li><a
href="affiliates.html">Affiliates</a></li>
</ul>
</li>
<li><a href="news.html">NEWS &
EVENTS</a></li>
<li><a
href="contact.html">CONTACTS</a></li>
</ul>

<script type="text/javascript">
var menubar1 = new Spry.Widget.MenuBar("menubar1",
{imgDown:"", imgRight:""});
</script>
</td>
</tr>
</table>
</td>
Here's a copy of the SpryMenuBarHorizontal.css file I have:
quote:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release
1.5 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* 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;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to auto so it comes onto the
screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* 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;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/*background-image: url(SpryMenuBarDown.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
/*background-image: url(SpryMenuBarRight.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
/*background-image: url(SpryMenuBarDownHover.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
/*background-image: url(SpryMenuBarRightHover.gif);*/
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe*/
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f/loat: left;
background: #FFF;
If I can get this last issue working I'd be all set with the
website. If anyone has any suggestions I would greatly appreciate
it. Thanks.

All you have to do is remove the text-align:center that you
added to this rule:
ul.MenuBarHorizontal li
width: 103px;
text-align:center;
font-size:11px; border:none;
In the Menu Bar Styling Examples, we don't change the
text-alignment of the li, we change the alignment of the link
elements which are the actual menu items.
--== Kin ==--

Spry menubar submenu horizontal instead of vertical

I have spent two days trying to figure out why the submenu on my spry menubar goes horizontal instead of vertical. I have watched youtube videos and all the tutorials automatically have them going vertical under each other. My submenu bar goes left to right and i dont want that. I have tried several changes with the code in CSS and the HTML and I can move the main menubar and the submenu all over the screen, just cant get it do drop down under each other. Help please!!

Have a look here for auto widths http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml.
The only change I would make to the above is to add !important to the following
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
Gramps

MenuBar -submenu color

Hi I've some problem with setting style of menubar.
I've two question:
I can change the color of menubar, but may I change the background color of submenu ?( I see them still white).
May I change the orientation of submenu? (for example from vertical to horizzontal and vice versa).
Thank you
Marco

Here is how to change the menubar item background color ..
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="left"
        backgroundColor="white"
>
    <mx:Style>
    .menuBarStyle
    backgroundColor : #ff0000;
    </mx:Style>
    <mx:MenuBar menuStyleName="menuBarStyle" id="myMenuBar" labelField="@label">
        <mx:XMLList>
            <menuitem label="MenuItem A">
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B"/>
            <menuitem label="MenuItem C"/>
            <menuitem label="MenuItem D">
                <menuitem label="SubMenuItem D-1"
                    type="radio" groupName="one"/>
                <menuitem label="SubMenuItem D-2"
                    type="radio" groupName="one"
                    selected="true"/>
                <menuitem label="SubMenuItem D-3"
                    type="radio" groupName="one"/>
            </menuitem>
        </mx:XMLList>
    </mx:MenuBar>
</mx:Application>
I'm not sure about #2.
hope this helps,
Babo,

MenuBar submenu display

when i go on a root menu element of a menubar, automatically i display a submenu element, if it exists.
May I make a condition to decide to see the submenu or no.
thanks

First docs:
http://livedocs.adobe.com/flex/3/langref/mx/controls/MenuBar.html
Default component is
mx.controls.treeClasses.DefaultDataDescriptor
so you can see in sorce realization.
It should reazile interface http://livedocs.adobe.com/flex/3/langref/mx/controls/menuClasses/IMenuDataDescriptor.html

Menubar submenu display problems

I have created a menubar using graphic elements as the
submenu triggers, and I was able to go in and make modifications to
the css and js files so that everything was being properly
positioned in FF and IE6. When I checked in IE7, however, the
submenu's appear much lower than in FF/IE6. Here is a link to the
page to see what I am talking about:
http://www.jefffulwiler.net/spryWidgets/menuCombo.html.
Any suggestions on addressing this issue would be greatly
appreciated. Thanks.
Jeff

This fix was posted in another thread and worked for me:
The problem for the false is a known bug we have for the Spry
Menu in a solution for another IE bug. You'll have to go in your
CSS and look for this class "ul.MenuBarVertical iframe". Inside you
should add the following line:
filter:alpha(opacity:0.1);

Menubar submenu display problems in IE

I have created a menu with dropdown submenus which display
fine in safari and firefox, though in IE 6 and 7 I'm having
problems with the submenus. In between each submenu box is a gap
which should be transparent to show the colour of the cell
underneath, though in Internet Explorer instead of being
transparent its showing white inbetween the boxes, also you can see
between the top two boxes part of some text which looks like it
says 'false'. Is there anybody out there who can help me? I'm so
stuck!! Many thanks, Rebecca

This fix was posted in another thread and worked for me:
The problem for the false is a known bug we have for the Spry
Menu in a solution for another IE bug. You'll have to go in your
CSS and look for this class "ul.MenuBarVertical iframe". Inside you
should add the following line:
filter:alpha(opacity:0.1);

MenuBar submenu shows up way right in IE

Please Please help. I am using the horizontal menu barwith 2
submenu levels.
I have searched the forum and can't find the fix that works.
I loaded the 1.5 .js file, but it didn't fix it.
You can see the site at
adshapiro.com/test
The CSS is located in the Spry folder....
I am still looking for the fix on the forum but if you know
how to fix this let me know

Got my to work - found this in the samples
add this to your styles
<style type="text/css">

</style>
Worked for me

Menubar submenu icon display right side..

Hi.,
I have using menubar with custom item renderer menus. sub menu icon was displayed right side corner. but i want to display left side icon and then labelfield., using iconfield and labelfield also.
Any one help this problem..
With Regards.,
Lings

Flex 4.1 will have support for right-to-left languages. Is that what you
are trying to accomplish or are you just trying to get a different look? If
you just want a different look, subclass MenuItemRenderer and look at past
threads on how to apply it.

Change the colour of my submenu in spry-UI-1.7

hello,
as the title says, how do i change the background colour of my submenu (the one that collapses) and the hover action background.
i created it with the widget browser, but found out this colour doesnt work so well.
in my spry-UI-1.7>css>Menu>basic i have two .css files
SpryMenuBasic.css
this is the css:
@charset "UTF-8";
/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
/* This is the css for a basic Spry 2 MenuBar.
* The first section is basic layout, and should in general not need to be modified.
* The final section of this file specifies images to use for arrows for the menu. These
* are either down or right-pointing as required by horizonatal or vertical layouts. You
* can either replace the referenced images with your own, or you can modify these rules to
* point to your won images.
* These rules are supplemented by those specified in the OAM file for inclusion in the html document,
* or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
/* Resets for ul and li in menus */
.MenuBar .MenuBarView, .MenuBar .SubMenuView {
display:block;
list-style:none;
margin:0;
padding:0;
/*** Layout Rules for Basic Menu ***/
/* Top Level MenuBar
* Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
* The simplest way is to float the widget wrapper
.MenuBar { /* overridden by .MenuBarVertical version of this rule */
float:left;
width:100%;
.MenuBarVertical {
float:left; /* Used to make menubar shirink to fit contents */
width:auto;
/* SubMenus */
.MenuBar .SubMenu {
display:block;
position:absolute;
top:0;
left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
padding:0;
/* First level of submenus - pulls down from horizontal menubar, right from vertical */
.MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
top:100%;
left:0px;
.MenuBarVertical .SubMenuVisible {
top:0px;
left:100%;
/* All submenus below level 1. All pullout to the right */
.MenuBar .SubMenu .SubMenuVisible {
display:block;
position:absolute;
top:0px;
left:100%;
/* MenuItems, MenuItemLabels, and MenuItemContainers */
.MenuBar .MenuItem {
display:block;
text-decoration:none;
.MenuBar .MenuItemLabel {
display:block;
.MenuBar .MenuItemContainer {
position:relative;
white-space:nowrap;
float:left; /* overridden by .MenuBarVertical version of this rule */
display:block;
margin:0;
padding:0;
.MenuBarVertical .MenuItemContainer {
float:none;
.MenuBar .SubMenu .MenuItemContainer {
float:none;
/* Layout Rules needed by IE6 - excluded from other browsers */
.SpryIsIE6 .SubMenu .SubMenu {
width:100px;
height:1%;
.SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
width:auto;
/* End Layout section */
* Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
.MenuBar .MenuItemLabel{
background-image:none;
/* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
.MenuBar .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
/* IE6 rules for Arrows */
.SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
and i got "SpryMenuBasicSkin.css"
with this css:
@charset "UTF-8";
/* SpryMenuBasicSkin.css - version 0.5 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
/* This is the skinning css for a basic Spry 2 MenuBar.
* You can use this CSS as a starting point for skinning an instance of the SpryMenuBar widget */
/* The rules in this file assume the following widget classes for menu layout:
MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical. 2nd level subs
and beyond are pull-right.
MenuBarVertical - vertical main bar; all submenus are pull-right.
These should be set as the 'WidgetClass' in the widget constructor. If the menu is to be vertical, pass both names,
space-delimited. For example: WidgetClass: "MenuBar MenuBarVertical".
You can also pass in extra classnames to set your desired top level menu bar layout. They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
eg: WidgetClass: "MenuBar MenuBarLeftShrink"
.MenuBar {
background-color:#cccccc;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
.MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
.MenuBar .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#cccccc;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
.MenuBar .MenuItemFirst {
border-style: none none none none;
.MenuBar .MenuItemLast {
border-style: none solid none none;
.MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#333333;
padding: 6px 15px 6px 39px;
width: 6em;
width:auto;
background: #cccccc;
.SpryIsIE6 .MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
.MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
background-color:#ffffff;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid solid solid;
.MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid solid solid;
.MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
.MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
.MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
.MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#ffffff;
color:#333333;
padding: 6px 12px 6px 5px;
width: 7em;
/* Hover states for containers, items and labels */
.MenuBar .MenuItemHover {
background-color: #999999;
border-color: #cccccc #cccccc #cccccc #cccccc;
.MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #999999; /* consider exposing this prop separately*/
color: #000000;
.MenuBar .MenuItemHover .MenuItemLabel{
background-color: #999999;
color: #000000;
.MenuBar .SubMenu .MenuItemHover {
background-color: #cccccc;
border-color: #cccccc #cccccc #cccccc #cccccc;
.MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #cccccc;
color: #333333;
/* Submenu properties -- First level of submenus */
.MenuBar .SubMenuVisible {
background-color: #ffffff;
min-width:0%; This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
.MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
.MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
.MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 .MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #999999; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 .MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #cccccc; /* consider exposing this prop separately*/
color: #333333;
.SpryIsIE6 .MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
what is the rule i nedd to change? i think the background colour of the submenu is lightgray #CCCCCC right now, and the hover one is a darker colour.
thanks!

I am sorry to have to point out to you that you have changed SpryMenuBasicSkin.css so much that it is impossible to render any assistance.
To start with, the menubar has an ID of MenuBar, yet in the CSS I only see this referenced as a CLASS as in
.MenuBar {
background-color:#cccccc;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
I would suggest to start again.
Once you have done that, supply a link to your site and we will assist you further.
Gramps

Submenu problem

Hi,
I just tested some menubar-submenu on browser but the submenu is not moved with browser. If the browser is resized or moved, the submenu doesn't detect the event and always popped up at the first place. I found the same thing on JavaFX sample demo page:
http://download.oracle.com/otndocs/products/javafx/2.0.2/samples/Ensemble/index.html
To re-produce this problem, open the link above then click control->choice box. Then move the browser or resize it. The submenu is still popped up at the first place.
I wonder this is a common problem or only happening to me..

Yes, choice boxes don't display in the correct location in browsers.
I filed a jira issue regarding this earlier http://javafx-jira.kenai.com/browse/RT-18874, which which is also filed as similar issues http://javafx-jira.kenai.com/browse/RT-18251 and http://javafx-jira.kenai.com/browse/RT-15970
Note, ContextMenus don't display in the correct location when you scroll the browser either (this is also captured in RT-15970).
Tooltips (which are also heavy-weight overlay controls) do display in the correct location - so somebody is doing something right somewhere - just need to do the same correct thing for the other pop-over controls.
These bugs are all scheduled to be fixed in the next (2.1) release, but you can vote for them in Jira or leave a comment there if you wish.

Vertical Menubar Displaying Problem

I have a Spry 2.0 Vertical Menubar that is not working right because it is bigger than the <div> is it sitting in. If it would display over the top of all the other <divs> in the page, I would be a happy camper. So I put:   overflow:visible;   in pretty much every area of the menubar style sheet and now the <div> to the right which is a rotating picture, moved down the page to fit in the menubar. And the menu bar isn't working right on top of it (blinking instead of submenus opening). AAGGHHHH!!!! Can anyone help me?
I cannot link to the page on this forum because it is a confidential client site I'm creating that is still in draft mode but I can send an email with the link if you email me first. Thanks in advance for all help!
Jeannette

Here is the style sheet, just incase that will help.
Jeannette
/* CSS Document */
@charset "utf-8";
#container {
margin-left: auto;
margin-right: auto;
html, body, div, span, applet, object, iframe, ul, ol, img, p, a {
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
    background: url(images/bkgrnd-page.gif) no-repeat;
body {
width: 960px;
margin: 0 auto;
height: 100%;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:20px;
font-style:normal;
font-weight: none;
margin: 0px;
    padding: 0px;
align: center;
background: url(bkgrnd-page.gif) no-repeat;
body a:link{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#06F;
font-variant:normal;
text-transform:none;
vertical-align: bottom;
body a:hover{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#06F;
font-variant:normal;
font-size:14px;
body a:active{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#6C0;
font-variant:normal;
body a:visited{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#06F;
font-variant:normal;
#top {
width:960px;
height:25px;
#top .left{
float:left;
width:330px;
height:25px;
font-size:10px;
font-style:normal;
text-decoration:none;
cursor:default;
color:#000000;
vertical-align: text-bottom;
padding-left: 20px;
#top .right{
float:right;
width:610px;
height:25px;
font-size:10px;
font-style:normal;
text-decoration:none;
cursor:default;
color:#000000;
vertical-align: text-bottom;
text-align:right;
#top a {
color:#000000;
font-size:10px;
font-style:normal;
text-decoration:none;
vertical-align: baseline;
#top a:hover {
color:#09F;
font-size:10px;
font-style:normal;
text-decoration:none;
vertical-align: baseline;
#header {
clear:both;
width:960;
max-height: 103px;
margin-bottom:0px;
margin-top:0px;
#header .left{
float:left;
width:350px;
height:103px;
background: #003;
padding-left: 20px;
#header .right{
float:right;
width:350px;
height:103px;
    background:#003;
text-align: right;
padding-right:10px;
#header .center{
margin-left: 260px;
margin-right: 351px;
height: 103px;
background: #003;
font-size: 10px;
color: #FFF;
text-decoration: none;
text-align: center;
#navigation {
clear:both;
height: 287px;
width: 960px;
#navigation .nav {
float:left;
height: 287px;
width: 383px;
padding-top:10px;
padding-left:10px;
#navigation .rotator {
float:right;
    height: 287px;
    width: 575px;
#content {
clear:both;
width: 960px;
height: 600px;
background: #FFF;
margin-top: 32px;
#content .left{
width: 300px;
float: left;
padding-right: 10px;
padding-left: 10px;
background: #FFF;
height:600px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
#content .center{
width:298px;
float:left;
padding-right: 10px;
padding-left: 10px;
height: 490px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
#content .right{
    width: 300px;
    float: left;
height:496px;
padding-right: 10px;
padding-left: 10px;
#content .pad{
float:right;
height: 102px;
width: 628px;
text-align: right;
vertical-align:bottom;
#footer {
clear:both;
height:80px;
vertical-align: top;
#footer .logo {
float:left;
width:250px;
height:80px;
background:#003;
text-align: center;
padding-top:0px;
vertical-align:top;
#footer .copyright {
float:right;
background: #003;
width:710px;
height:80px;
color:#FFF;
font-size:10px;
margin:0px;
text-align: right;
vertical-align:top;
.title{
font-size:20px;
font-weight:bolder;
color:#003;
.address {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
line-height: 16px;
font-weight: normal;
font-variant: normal;
color: #FFF;
text-decoration: none;
text-align: right;
.phone {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-style: normal;
line-height: 22px;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #6CF;
visibility: visible;
text-decoration: none;
text-align: right;
.title-red {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bolder;
font-variant: normal;
color: #900;
text-decoration: none;
#MenuBar {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 15pt;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:1px;
border-style: solid solid solid solid;
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 55em;
.MenuBarFixedCentered {
float: none;
width: 55em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0;
#MenuBar .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#000033;
border-width:1px;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-style: solid solid solid solid;
#MenuBar .MenuItemFirst {
border-style: solid solid solid solid;
#MenuBar .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#FFFFFF;
background-color:#000033;
padding: 6px 15px 6px 10px;
width: 9em;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 11pt;
font-style: normal;
background-color:#000033;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
overflow:visible;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
overflow:visible;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
overflow:visible;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
overflow:visible;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
overflow:visible;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#000033;
color:#FFFFFF;
padding: 6px 0px 6px 7px;
width: 9em;
overflow:visible;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #000033;
border-color: #ffffff #ffffff #ffffff #ffffff;
overflow:visible;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #000033; /* consider exposing this prop separately*/
color: #9CF;
overflow:visible;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #000033;
color: #9CF;
overflow:visible;
#MenuBar .SubMenu .MenuItemHover {
background-color: #000033;
border-color: #cccccc #cccccc #cccccc #cccccc;
overflow:visible;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #000033;
color: #9CF;
overflow:visible;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #000033;
min-width:0em; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:1px;
border-style: solid solid solid solid;
overflow:visible;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px;
z-index:10;
overflow:visible;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
overflow:visible;
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #000033;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px;
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #000033;
color: #0099ff;
overflow:visible;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #000033; /* consider exposing this prop separately*/
color: #0099ff;
overflow:visible;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */

Battery menubar status not updating

Hello,
My battery menubar status indicator does not change while my powerbook is plugged in. It will stay at the same charge % and the time remaining stays on "calculating".
Any suggestions would be appreciated.
Thank you

I had the same issue, here are a few fixes:
If you are using a non-native screen resolution on your machine, the software may refuse to run or identify your machine incorrectly. Please select your batteries maximum capacity manually in the Preferences window.
Move"com.apple.PowerManagement.plist," located in Library/Preferences/SystemConfiguration to the trash. After removing this file, restart the machine.
Mine came back, its out of whack right now... I will run it down and see if it is accurate after a full recharge.

How to change Spry SUBMENU padding??

I changed the menu padding, which also changed the submenu. How can I override the Menu padding CSS and choose a different padding for the submenus? Which CSS rule will let me do this?

It depends on which version of Spry you're using.    If it's Spry 2.0 look for this in your embedded CSS code:
#MenuBar .SubMenu .MenuItem .MenuItemLabel {
    text-align:left;
    line-height:1em;
    background-color:#ffffff;
    color:#333333;
    padding: 6px 12px 6px 5px;
    width: 7em;
    width:auto;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

MenuBar - Submenu Indicator

Similar Messages

Maybe you are looking for