Submenu placement

When I change the submenu placement of my horizontal spry
menu bar, it changes the placement of all submenus. Is there any
way I can modify the placement of an individual submenus?

"skonefes" <[email protected]> wrote in
message
news:gdo08o$5h4$[email protected]..
>
> When I change the submenu placement of my horizontal
spry menu bar, it
> changes the placement of all submenus. Is there any way
I can modify the
> placement of an individual submenus?

Similar Messages

  • Menu bar widget submenu placement bug in IE7

    I am tring to set up my first horizontal menu bar widget.
    Looks great in FF, but the submenu is placed over the main
    menu and off to the side in IE7.
    Could any one help?
    Example is located here:
    http://dco4.com/spry_test/
    Submenu is under "consumables" button.

    Possibly a padding or margins error.. having a similar issue
    myself only it lines up properly in IE and not in Firefox!
    Sorry..

  • Spry H-Bar SubMenu Placement

    I hope I can get a little help with a problem I have come across.
    Background: I am creating a page with 3 separate horizontal Spry Menus, each menu is contained in a cell of a 1 row 3 column table. I created the first menu so it looks like I want it to, to do so I had to insert a few local css rules to override the separate css file as per a suggestion on adobe's site. Everything works as I desire in Firefox and IE8.
    Next i created the 2nd menu in the 2nd cell and renamed the class to "MenuBarHorizontal2" and proceded to replciate both the local and seperate css rules and renamed all the replicas to match the modified 2nd menu. I realize this is probably a monkey force round peg in square hole approach, but it worked.. mostly.
    Issue: When viewed in Firefox everythign looks as I intend, but when viewed in IE8 the 2nd menu has an issue. The 2nd menu's submenu area appears at the top of the page directly over the menu bar instead of below it like the first menu. I have yet to insert the 3rd menu, but I expect a similar issue form it so I have held off.
    I will attach the page in question, and both css sheets for you to view. In addition you can view the page online at http://www.ecotulips.com/test.htm
    I appreciate any help with this issue as I am doing this site as a wedding gift for my sister.

    Hi,
    I notice that you have menubar and other styles both as linked external style sheets AND as style sheets in the head of your document.
    This will do nothing but confuse things. If you can keep all your styles in distinct, external style sheets, you will better be able to trace sources of difficulty, as the cascade of styles will be simpler to read.
    Regarding your page with
    3 separate horizontal Spry Menus, each menu is contained in a cell of a 1 row 3 column table. I created the first menu so it looks like I want it to, to do so I had to insert a few local css rules to override the separate css file as per a suggestion on adobe's site.
    I think that you can achieve the effect you want with a single Spry Menubar with three drop down menus all on the same menu bar. Take a look at supporting video: http://www.adobe.com/designcenter/video_workshop/?id=vid0168
    As you have found, by trying to use your "Number 12 forcefit" (round peg in a square hole),  you have leaped over more careful construction techniques into a heap of difficulty. If you go back and remove the menubars that you have inserted...click anywhere on one, click the blue tab on the surrounding div, and strike the delete key, everything will hopefully fall back into pre-menu condition.
    When you insert the menubar, you will find it totally editable, CSS style-wise.
    Z

  • Spry submenu placement issue

    Hi all, here's the url:
    http://davidcoshdesign.com/nea/
    Look at Lighting.  When I added a 2nd level submenu item, the 1st level item stopped being centred below 'Decorative'.
    Also, the grey box associated with the 2nd level item appears to be above it!
    I've tried altering the position in ul.MBH ul ul – but this doesn't seem to have any affect.
    Any clues, greatly appreciated.
    RP

    This might help http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and this http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdavidcoshdesign.com%2Fnea%2F
    Gramps

  • Menu Bar Submenu Placement

    MenuBar Widget, v1.5 on CSS and js files.
    The submenus show up correctly on Mac Safari, but on both Mac
    Firefox and Camino the submenus overlap the main menu.
    I've no doubt changed something I shouldn't have but I've no
    idea what.
    The page can be viewed
    here. The CSS is
    here.

    I got this worked out, but I'm not sure of the origin.
    Something I changed, no doubt.
    My first problem was that the Menu Bar was padded left 50 or
    so pixels, but had no such padding applied anywhere I could see.
    (It had top-bottom margins as well.) So I had added a style to the
    eclosing cell taking away the margins and padding. Fixed that in
    Safari, but upon checking in Firefox Mac and Camino, the submenus
    were then placed directly over the main menu.
    After hours of fiddling, I found the style I added was one
    source of the problem. Removing that let the submenus be placed
    properly. But that left me with the unnecessary left padding (and
    top-bottom margins) again.
    I finally fixed that by adding some style thusly:
    quote:
    <ul id="MenuBar1" class="MenuBarVertical"
    style="padding: 0; margin: 0;">
    If anyone knows of a better way, please tell me.
    I've been working at home and don't have access to a Windows
    machine. If someone could check this
    here I'd appreciate
    it.

  • Spry menu bar places vertically, not horizontally?

    I followed the tutorial on using the widget browser to download Spry Menu Bar 2.0 and after configuring for a horizontal bar placed the bar in the tutorial index.html. The placement results in a vertical menu bar. What am I doing wrong?
    SPRY CODE
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Spry Menu Bar - Basic : tcm.menu</title>
    <link type='text/css' href='Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
    <script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/SpryMenu.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js'></script>
    <style type="text/css">
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
    These assume the following widget classes for menu layout (set in a preset)
    .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.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    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.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
    background-color:#b0c9d9;
    font-family: "Lucida Sans Unicode", "Lucida Grande", 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: bold;
    font-size: 18px;
    font-style: normal;
    padding:0;
    border-color: #cddce7 #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: 960px;
    .MenuBarFixedCentered {
    float: none;
    width: 960px;
    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 10px 0px 0px;
    background-color:transparent;
    border-width:2px;
    border-color: #cddce7 #5c6a72 #5c6a72 #cddce7;
    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:center;
    line-height:1.4em;
    color:#333333;
    background-color:transparent;
    padding: 6px 15px 6px 25px;
    width: 138px;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    font-size: 16px;
    font-style: normal;
    background-color:#677e8c;
    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;
    #MenuBar  .SubMenu .MenuItemFirst {
    border-style: solid solid none 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:transparent;
    color:#ffffff;
    padding: 6px 12px 6px 5px;
    width: 171px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
    background-color: #677e8c;
    border-color: #697278 #b8c4ca #b8c4ca #697278;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
    background-color: #b0c9d9;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #000000;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
    background-color: transparent;
    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: transparent;
    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: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
    .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 */
    </style>
    </head>
    <body>
    <ul id="MenuBar">
      <li> <a href="#">Home</a> </li>
      <li> <a href="#">Entertainment</a>
      <ul>
        <li> <a href="#">TV Listings</a> </li>
        <li> <a href="#">Music</a>
          <ul>
            <li> <a href="#">Hits</a> </li>
            <li> <a href="#">Ragga</a>
              <ul>
                <li> <a href="#">Roots</a> </li>
                <li> <a href="#">Reggaeton</a> </li>
                <li> <a href="#">Dancehall</a> </li>
              </ul>
            </li>
            <li> <a href="#">Country</a> </li>
          </ul>
        </li>
        <li> <a href="#">The Dirt</a>
          <ul>
            <li> <a href="#">Hollywood</a> </li>
            <li> <a href="#">NY Beat</a> </li>
            <li> <a href="#">London Scene</a> </li>
          </ul>
        </li>
        <li> <a href="#">The Web</a> </li>
      </ul>
      </li>
      <li> <a href="#">Politics</a> </li>
      <li> <a href="#">Sports</a>
        <ul>
          <li> <a href="#">Football</a> </li>
          <li> <a href="#">Baseball</a> </li>
          <li> <a href="#">Basketball</a> </li>
          <li> <a href="#">Racing</a>
            <ul>
              <li> <a href="#">F1</a> </li>
              <li> <a href="#">Indy Car</a> </li>
              <li> <a href="#">Stock Car</a> </li>
            </ul>
      </li>
        </ul>
      </li>
      </ul>
    <script type="text/javascript">
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
      widgetClass: "MenuBar  MenuBarLeftShrink",
      insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    </script>
    </body>
    </html>
    INDEX.HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bayside Pulse</title>
    <link href="styles/bayside.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <link href="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic. css" rel="stylesheet" type="text/css" />
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/plugins/MenuBar2/Spr yMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/plugins/MenuBar2/Spr yMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
    These assume the following widget classes for menu layout (set in a preset)
    .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.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    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.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
    background-color:#b0c9d9;
    font-family: "Lucida Sans Unicode", "Lucida Grande", 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: bold;
    font-size: 18px;
    font-style: normal;
    padding:0;
    border-color: #cddce7 #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: 960px;
    .MenuBarFixedCentered {
    float: none;
    width: 960px;
    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 10px 0px 0px;
    background-color:transparent;
    border-width:2px;
    border-color: #cddce7 #5c6a72 #5c6a72 #cddce7;
    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:center;
    line-height:1.4em;
    color:#333333;
    background-color:transparent;
    padding: 6px 15px 6px 25px;
    width: 138px;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    font-size: 16px;
    font-style: normal;
    background-color:#677e8c;
    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;
    #MenuBar  .SubMenu .MenuItemFirst {
    border-style: solid solid none 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:transparent;
    color:#ffffff;
    padding: 6px 12px 6px 5px;
    width: 171px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
    background-color: #677e8c;
    border-color: #697278 #b8c4ca #b8c4ca #697278;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
    background-color: #b0c9d9;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #000000;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
    background-color: transparent;
    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: transparent;
    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: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
    .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 */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="wrapper">
      <div id="header"><img src="images/bayside_pulse.jpg" width="960" height="150" alt="Bayside Pulse" /></div>
      <div id="nav">
        <ul id="MenuBar">
          <li> <a href="#">Home</a></li>
          <li> <a href="#">Entertainment</a>
            <ul>
              <li> <a href="#">TV Listings</a></li>
              <li> <a href="#">Music</a>
                <ul>
                  <li> <a href="#">Hits</a></li>
                  <li> <a href="#">Ragga</a>
                    <ul>
                      <li> <a href="#">Roots</a></li>
                      <li> <a href="#">Reggaeton</a></li>
                      <li> <a href="#">Dancehall</a></li>
                    </ul>
                  </li>
                  <li> <a href="#">Country</a></li>
                </ul>
              </li>
              <li> <a href="#">The Dirt</a>
                <ul>
                  <li> <a href="#">Hollywood</a></li>
                  <li> <a href="#">NY Beat</a></li>
                  <li> <a href="#">London Scene</a></li>
                </ul>
              </li>
              <li> <a href="#">The Web</a></li>
            </ul>
          </li>
          <li> <a href="#">Politics</a></li>
          <li> <a href="#">Sports</a>
            <ul>
              <li> <a href="#">Football</a></li>
              <li> <a href="#">Baseball</a></li>
              <li> <a href="#">Basketball</a></li>
              <li> <a href="#">Racing</a>
                <ul>
                  <li> <a href="#">F1</a></li>
                  <li> <a href="#">Indy Car</a></li>
                  <li> <a href="#">Stock Car</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
      widgetClass: "MenuBar  MenuBarLeftShrink",
      insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
        </script>
      </div>
      <div id="sidebar">
        <h3>Check This Out</h3>
        <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt quis nostrud exercitation. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat.</p>
        <p>Sunt in culpa qui officia deserunt ullamco laboris nisi. Duis aute irure dolor mollit anim id est laborum. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate.</p>
        <p>Lorem ipsum dolor sit amet, duis aute irure dolor cupidatat non proident. Sed do eiusmod tempor incididunt. </p>
      </div>
      <div id="maincontent">
        <h2>There&#8217;s More to San Francisco than Cafe Townsend</h2>
        <p>Sure, Cafe Townsend's cool, and Chef Ipsum provides a great range of international cuisine. But San Francisco is the city where you can weave dreams of your own. Come, explore!</p>
        <h3>Scott&#8217;s For a Night to Remember</h3>
        <p>It's certainly one you're unlikely to forget&#8212;or should that be Fegette? Lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. <img src="images/adobeduo.jpg" alt="Scott and Duane" width="400" height="233" class="floatright" />In reprehenderit in voluptate quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.</p>
        <p>Velit esse cillum dolore mollit anim id est laborum. Ut enim <a href="#">ad minim veniam</a>, ullamco laboris nisi in reprehenderit in voluptate. Excepteur sint occaecat duis aute irure dolor consectetur adipisicing elit. Ut labore et dolore magna aliqua.</p>
        <p>Sed do eiusmod tempor incididunt ut enim ad minim veniam, duis aute irure dolor. Ullamco laboris nisi in reprehenderit in voluptate excepteur sint occaecat. Cupidatat non proident, sunt in culpa lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. Consectetur adipisicing elit, <a href="#">ullamco laboris nisi</a> in reprehenderit in voluptate.</p>
        <p>Eu fugiat nulla pariatur. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo consequat.</p>
        <p>Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate velit esse cillum dolore. Ullamco laboris nisi cupidatat non proident, ut aliquip ex ea commodo consequat. Sunt in culpa ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    </body>
    </html>

    Please upload your file to a server and give us a link. It is extremely difficult to work with pasted-in code...much more useful to see it in working order.
    Beth

  • Spry Menu Bar 2.0 (1.0) - Handling of widget generated CSS, placement and rendering problems in CSS

    Hello:
    I wanted to repost my question to re-frame the issue based on what I have learned thus far.
    I am working on a website that has been developed using the Spry Menu Bar Framework UI (2.0) I.0, that has some peculiar rendering problems that affect IE 6 in particular.  The CSS is reprinted below.
    In particular, when I post the widget generated CSS in the head as it is orginally situated by the framework, the menu bar works fine.  However, it seemed to me that I should be able to reduce page weight (an important consideration considering my target population) by placing it in the general style sheet governing the entire site.
    When I place the styles at the beginning of the style sheet the menu doesn't render at all in any of the browsers (IE 6+, Firefox, Opera, Safari, Netscape, etc.) as it conflicts with the general rules governing links that appear later in the style sheet.  When I place the styles specific to the Menu bar at the end of the style sheet, then the menu bar renders properly in all browsers except IE 6.
    The odd thing is that the only way to ensure that the menu bar works in IE 6 is to keep the menu related styles in the head of each page.  This raises problems related to page weight (not an insurmountable consideration if no other solution can be found) but still an issue.  Likewise I need to support IE 6, again given the target audience/population.  The issue obviously has something to do with specificity, but I am not certain that is the only consideration at work here.  I have not tried the !important selector in regard to the menu, as IE 6 seems to only partially support this.
    Thanks in advance for any advice or insight that can be provided.  Thanks in particular to Martin for his contributions to my earlier question related to this issue.
    Steve Webster.
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
       these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
       .MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
       You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
        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.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
       with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
       font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar 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: 17px;
        font-style: normal;
        padding:0;
    /* 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: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 0px 18px 0px 5px;
        width: 10em;
        width:auto;
    .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: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none none;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 10px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#ffffff;
        padding: 10px 10px 10px 10px;
        width: 240px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
        background-color:#2E35A3;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
       min-width:0%;  /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
        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 theMenuItemContainer. 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: transparent;
        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 forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
    * all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. 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 lotof these needed, the plugin does not generate the extra classes formodern 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.jsscript.
    * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .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 */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>
    The CSS governing the site generally is reproduced below:  (my belief is that it is the a:link, a:visited,  a:hover, a:active styles that may be in conflict).
    @charset "utf-8";
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
       min-height: 0; /* This is necessary to overcome the "haslayout" bugthat is found in Windows 7 in conjuction with IE8.  For Moreinformation see: URL -- http://reference.sitepoint.com/css/haslayout.html */
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
        color: #000000;
        list-style-image: none;
        background-color: #FCFCFC;
    h1,h2,h3,h4,h5,h6 {
    color:#000066;
    a:link {
        color: #151A96;
        text-decoration: underline;
    a:visited {
        text-decoration: underline;
        color: #1B8DCD;
    a:hover {
        text-decoration: none;
        color: #F30A0A;
    a:active {
        text-decoration: underline;
        color: #151A96;
    #container {
        width: 960px;   
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        text-align: left; /* this overrides the text-align: center on the body element. */
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection %20_960.png);
        background-repeat: repeat-y;
    #header {
           padding: 0;  /* this padding matches the left alignment of the elementsin the divs that appear beneath it. If an image is used in the #headerinstead of text, you may want to remove the padding. */
            width:960px;
            height:332px;
            background-image:
            url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960 .png);
            background-repeat:no-repeat;
    #header h1 {
        margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        display:none;
    #header img {
        display: none;
    #Main_nav_contents {
        padding: 0;
        margin-top: 0px;
        height: 39px;
        width: 950px;       
        padding-top: 275px; 
        padding-left: 39px;
        z-index: 3; 
    #MenuBarVertical {
        margin-bottom: 50px;
        padding-top: 50px;
        padding-bottom:200px;
        padding-left: 15px;
        padding-right: 15px;
    .mainContent_left {
       margin: 0;/* the right margin on this div element creates the columndown the right side of the page - no matter how much content thesidebar1 div contains, the column space will remain. You can removethis margin if you want the #mainContent div's text to fill the#sidebar1 space when the content in #sidebar1 ends. */
        padding-left:30px;
        padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
        width: 600px;
        float: left;
    .sidebar_right {
        float: right; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:0;
        margin-right:10px;
        font-size:90%;
    .mainContent_right {
        margin-left: 10px;
        padding-left:30px;
        padding-right:20px;
        width: 600px;
        float: right;
    .sidebar_left {
        float: left; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:30px;
        margin-right:0;
        overflow: hidden;
        font-size:90%;
    .main_content_centered {
        width: 650px;
        margin-left: 155px;
    .main_content_centered_header {
        margin-left: 75px;
    .sidebar_textbox {
        margin: 0px;   
        width: 260px;
        padding: 2px;
    .sidebar_textbox_header {
        width:255px;
        height:58px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Header.png);
    .sidebar_textbox_background_middle {
         width: 255px;   
        padding-top: 12px;   
        padding-bottom: 10px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Middle.png);
        background-repeat: repeat-y;
    .sidebar_textbox_content {
       /* The width and padding are set as follows to accomodate quirks inbrowser rendering and to ensure that text is contained within thebackground of the text box */
        width: 230px;
        padding-left: 20px;
        padding-right: 40px;
    .sidebar_textbox_footer {
        width:255px;
        height:64px;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Port rait%20Textbox%20Footer.png);
    #issues_menu a:link {
        color: #151A96;
        text-decoration: none;
        font-weight:bold;
    #issues_menu a:visited {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #issues_menu a:hover {   
        color: #F30A0A;
        font-weight:bold;
        font-style: oblique;
        text-decoration: none;
    #issues_menu a:active {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #archives {
        padding-top: 15px;
        padding-right: 15px;
        padding-bottom: 20px;
        padding-left: 0px;
    .landscape_textbox {
        width: 500px;
        margin-right: 0px;
        margin-left: 30px;
        padding-top:35px;
        padding-bottom: 25px;
        font-style: normal;
        font-weight: normal;
    .landscape_textbox_hdr {
        width:500px;
        height:38px;
        margin:auto;
        padding:0;
        background-image:
    url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%2 0Header.png);
    .landscape_textbox_middle {
        width:auto;
        margin:auto;
        padding-top: 12px;
        padding-bottom: 12px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/lan dscapte%20Textbox%20Middle.png);
        background-repeat:repeat-y;
    .landscape_textbox_content {
        width:450px;
        padding:25px;
    .landscape_textbox_ftr {
        width:500px;
        height:44px;
        margin:auto;
        padding:0;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Lan dscape%20Textbox%20Footer.png);
    #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        width: 960px;
        height: 222px;
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_ 960.png);
        background-repeat:no-repeat;
    #footer p {
       margin: 0px; /* zeroing the margins of the first element in the footerwill avoid the possibility of margin collapse - a space between divs */
        padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align:center;
        margin-left: 50px;
        margin-right: 50px;
        padding: 10px;
        font-size: small;
    #footer h5 {
    text-align:center;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .dropcap {
        display: block;
        float: left;
        line-height: 80%;
        font-size: 250%;
        font-weight: bolder;
        color: #000066;   
        padding: .03em .1em 0 0;
    .red_arrows {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);    
    .blue_bullets {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Fu ll.png);   
    .attention {
        color: #F30A0A;
        font-size:x-large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .attention_small {
        color: #F30A0A;
        font-size:large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .table {
        table-layout:fixed;
    .blue {
        color: #00F;
    #container .mainContent_left p .blue {
        color: #0303A0;

    Hi Nancy:
    The specific code that I am referring to is the CSS code governing the styling of the spry menu widget that only works in IE 6 if, and only if, it remains in the head of the web page.  If removed and placed in a stylesheet, the IE plugins fail to compensate for the IE 6 "gap" bug.  As I said, it doesn't make sense to me that, assuming specificity is addressed, that these can not be included in an external style sheet.  I am looking for a) an explanation why they must remain embedded in the web page; and 2) any means by which I might be able to export them.
    I will reproduce the specific css style (code) below:  it should also be visable through reveal source --
    Thanks again, Steve Webster.
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
       these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
       .MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
       You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
        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.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
       with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
       font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar 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: 17px;
        font-style: normal;
        padding:0;
    /* 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: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 0px 18px 0px 5px;
        width: 10em;
        width:auto;
    .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: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none none;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 10px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#ffffff;
        padding: 10px 10px 10px 10px;
        width: 240px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
        background-color:#2E35A3;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
       min-width:0%;  /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
        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 theMenuItemContainer. 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: transparent;
        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 forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
    * all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. 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 lotof these needed, the plugin does not generate the extra classes formodern 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.jsscript.
    * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .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 */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>

  • 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

  • Spry Horizontal submenu hidden behind image

    This is driving me nuts. I am using Dreamweaver CS4. I have created a horizontal menu bar just above an image. When i hover over the main menu item the submenu is hidden behind the image. I have not been able to figure this one outy. i am very new to CSS and Dreamweaver. This is a template that i want to use across my entire site. You can goto http://www.gray-wolf.net/MainPages.html.
    @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
    /* 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: auto;
    width: 800px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #008080;
    height: 40px;
    float: left;
    top: 100px
    /* 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;
    width: auto;
    /* 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;
    filter:alpha(opacity:0.1);
    /* 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;
    float: left;
    background: #FFF;

    Your unexpected (and undesired) wolf call on entering that page scared the begesus outta me.  Most people don't take kindly to such surprises!
    You do realize that the page you linked to is a TEMPLATE page, but it is named with an HTML extension, right?  You did that just to show us the template?
    Also, it appears that you have built your entire site inside of the Templates folder -
    <a href="Templates/pgpage1.htm" title="Page 1 of my Photo Gallery">
    That's improper.  Nothing should be in the Templates folder other than the template files themselves.
    Finally, your use of absolute positioning as a primary page layout method is going to get you into serious trouble.  Please read this -
    http://apptools.com/examples/pagelayout101.php
    Now - here's the problem:
    You have applied a style of 'overflow:hidden' to div#nav.  Remove that.  With that in place, the submenus cannot flow OUT of div#nav.

  • Spry Horizontal Submenu Bar Issues in IE6

    Hey there,
    I've been struggling with this issue for a while now, and I was hoping that I might be able to get a little help from the community to resolve it.  I've built a site which looks absolutely fine in all browsers except for Internet Explorer 6.  In IE6, the sub menu bars jump around all over the place for no apparent reason, and I can't figure out why...  The site in question is www.flexyoffice.co.uk. 
    Now, in most browsers, the submenu appears above the menu bar.  This was my intention.  Unfortunately, in IE6, if you hover over a menu item containing a sub menu, the submenu will either appear over the menu item, below the menu item, or next to the menu item.  Additionally, once you try to actually hover over the sub menu, the sub menu itself moves, leaving the user to chase the submenu around the page in pursuit... Not ideal...!  Looking at the page in IE 6, it almost seems as if the submenu opens up to the right of the menu bar, which results in everything else being thrown out.  I could be wrong though.
    I'm relatively new to these forums, so if there is any specific information which I can provide which would possibly help to identify the issue, please do let me know.  If there are any suggestions out there that are worth giving a go, I would really appreciate any thoughts that you may have.
    Thanks very much guys,
    Chris

    Hi Chris,
    I tried your page in IE6 and it crashed the browser! To be honest, most people should have upgraded from IE6 ages ago, I was redirected to MS website to upgrade the second time I started the browser.
    As I couldn't even get the page to load, I can't suggest what could be wrong.
    One thing I did notice wrong that made your menus appear jumpy at first was that you are not preloading the images needed to display the menu bars.
    you have the Javascript function in the correct place - function MM_preloadImages() {
    But you have not selected to preload any images in the body tag.
    Should look something like this -
    <body onload="MM_preloadImages('images/buttons/contactOver.gif','images/buttons/aboutOver.gif', 'images/buttons/loginOver.gif','images/buttons/case_studiesOver.gif','images/buttons/newsO ver.gif','images/buttons/fundingOver.gif','images/buttons/eventsOver.gif','images/buttons/ homeOver.gif')">
    These are obviously not the images you want to preload (taken from one of my sites), replace the images with the images used in your menu and your menu will operate much smoother as the images will be ready to use.
    Hope this helps (a little!)
    Chris

  • How to make Spry menu and submenu backgrounds different

    Hi all. I have a horizontal spry menu bar, and i'm using a gradient image for the background of the main menu, but I want the submenu to just be a solid color. I figure i should just be able to use css for this solid BG, but I can create an image no problem if need be. I just think it looks unprofessional to have multiple segments of a horizontal gradient stacked vertically. I know this is possible, the second to last example on this link demonstrates but doesn't explain:
    http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
    I would greatly appreciate any available help on this subject!  Thanks again!

    Thanks for asking, no that is not my complete css file. Those are only *additional* lines to place adjacent to existing styles in your "SpryMenuBarHorizontal.css", but in each case as the next style, in the location I have indicated. Here, I'll put my complete file here for you:
    @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
    /* 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;
    ul.MenuBarHorizontal ul a {
         background-color: yellow;
    /* 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;
    ul.MenuBarHorizontal ul a.MenuBarItemHover, ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal ul a.MenuBarSubmenuVisible {
         background-color: green;
    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;
         filter:alpha(opacity:0.1);
    /* 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;
    .fleft {
         clear: none;
         float: left;
    The idea with putting the new styles *after* the original styles is that they are logically similar to but 'sub' styles to existing styles. In fact, you could probably put them way at the bottom, but if you wanted to edit them you might not find them again easily. I was trying to keep similar style rules together.
    Z

  • Submenu getting cut off

    Hi i am a newbie to flash i one of my frnd bought the menu from flashden website here is the test forum
    http://nitro.byethost14.com/
    the menu submenu gets cut off and is within that black region can anybody tell me how to make it come out of the black region i contacted few ppl in other forums they siad to change the html code used for the flash menu
    note:- i even used the wmode="transparent" it did not work.
    Thanks in advance
    please contact me at [email protected] for any further details abt the site

    kambrozewicz wrote:
    I am having problems with being disconnected from calls (it has happened 4 times) due to having no Skype credit, when my account has plenty of credit. I am paying for an account with 'unlimited' calls.
    Whats happening here?
    If Skype is warning you about not having Skype Credit to place the call, you may be calling numbers not covered by your subscription.  Not all subscriptions cover calls to all numbers in a particular country.  In many countries, landline numbers are the only numbers covered by subscriptions.  To better answer your question, we would need to know what subscription you have, and what number you are trying to reach (you could X out the last few digits of the number for privacy, but we'd need to know the country, city/area code, and what type of number this would be).
    Otherwise, you could contact Skype Customer Support, give them the specifics of your subscription and the number(s) you are trying to reach, and let them help you out. 
    Patrick
    Location/Ubicacion: Arizona USA
    Time Zone/Hora Local: UTC/GMT -7
    If this message has adequately addressed your issue, please click on the “Accept as Solution” button. If you found a post useful then please "Give Kudos" at the bottom of my post, so that this information can benefit others.
    Si esto mensaje le ha ayudado, por favor haga clic en "Aceptar como solución". Si encuentra un mensaje útil, por favor "Da Kudos" al final del mensaje, por lo que esta información puede beneficiar a otros.
    I am not a Skype employee. No soy un empleado de Skype.

  • Spacing of Spry Menu submenu items, and inserting background images

    Hiya, need a bit of help, could someone possibly guide me with this?
    I've created a Spry Menu in DW CS5 - so far, so good.. However I'm pretty new to CSS Styles so need pointers at what to change to get the result I need. I've created the spry menu, however the submenu dropdown items are not flush to the ones above, theres a 1px horz gap between each item and while it looks okay, its particularly visible in Firefox and Chrome and would prefer no spacing at all..
    The live site is at http://www.ebm.co.uk/2011site/indexnavbar2.html
    if you take a look at the drop down menu bar you'll see what i mean - what do I need to do to remove the spacing?
    I also want to replace the solid colour with images, where do I specify the images for 1) top menu item 2) submenu item and 3) 'hover' item, and do I need to make any areas transparent?
    Any advice would be much appreciated.. thanks!
    Chris

    This is a good place to start http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php.
    Also this might help http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
    Gramps

  • Can I place a "Return Button" within a clip?

    Is it possible to place a button within a video clip that would enable a user to return to the previous menu? I am using submenus and to return to the submenu requires going back to the main menu and then back into the submenu.
    24 inch iMac   Mac OS X (10.4.8)  

    Is it possible to place a button within a video clip that would enable a user to return to the previous menu?
    short answer is no. However you can add a button for the main menu
    If you have a project with submenus, you can add a button that viewers can click to go back to the main menu.
    To add a button for the main menu:
    Open the menu where you want to add the button and choose Project > Add Title Menu Button.
    Hope this helps.
    SDMacuser

  • 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.

Maybe you are looking for

  • Error when starting EM in 11gR2

    Hi all, When I try to start (emctl start dbconsole ) the EM console in 1g database I get the following error A system error has occurred. System error 3 has occurred. The system cannot find the path specified. Kindly help me on this

  • Adobe Bridge CS4 stopped working after Mavericks 10.9.3 upgrade

    I don't know if it is due to the upgrade today or something else, but since upgrading, I cannot use the file folder function in adobe bridge cs4. The files are on the drive and can easily be found in finder but the favorites in bridge and folder func

  • Rman error in active passive server

    PROBLEM: Rman is not working properly. DATABASE NAMES 1)METALIB 2)PREMO DIAGNOSTIC ANALYSIS: 1) CREATE RMAN_META4 CATALOG IN ‘METALIB’ DATABASE. 2) CREATE RMAN_PRM1 CATALOG IN ‘PREMO’ DATABASE. 3) PREMO DATABASE IS REGISTRED IN ‘RMAN_META4’ CATALOG.

  • No manual entry of batch, if batch determination fails to pick batch in DO

    Dear Experts, I have a scenario, where I want system to stop users to pick batch manually in Delivery order creation (VL01N), if batch determination procedure fails to auto-pick batch due to any reason. By standard configuration, is there any-way to

  • Lightsnake and GB on MacBook Pro

    Hey, I've just purchased Lightsnake and used to run it with the GB for a while successfully. But right now, no luck. I don't hear any sound, just noise on the background. Tried to go to Audio midi, and GB preferences, but still, no sound is coming ou