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

Similar Messages

Help with vertical spry menu bar submenu displaying incorrectly!

I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry Menu Bar Submenu won't show in Safari or Dreamweaver LiveView

I am trying to get my submenu to show up on my website's spry menu bar. It will show up when I test the site using firefox or IE but it won't show when I try LiveView in Dreamweaver or when I test using Safari. The site is www.fuseut.com/fuse
Here are is the CSS for the menubar:
@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: 125px;      float: left;      font-family: "MS Serif", "New York", serif;      overflow: visible; } /* 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: 50;      cursor: default;      width: 7em;      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: 7em; } /* 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: 0;      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;      padding: 0.5em 0.75em;      color: #FFF;      text-decoration: none;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;      text-align: center;      background-image: url(../menubgdefault.png); } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      color: #FFF002;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /* 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 {      color: #FFF002;      text-decoration: underline;      font-weight: bold; } /******************************************************************************* 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%;      background-color: #999; } /* 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;      } }
And here is the HTML code:
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FUSE UT</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
<meta name="Keywords" content="fuse ut utk university of tennessee tommy jervis avery howard ross rowland angie sessoms sga campaign elections" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menubarparent" style="z-index: 20; position: absolute; overflow: visible;">
<div id="menubar" style="z-index: 10;">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">FUSE</a>      </li>
    <li><a href="senators.html" class="MenuBarItemSubmenu">Senators</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li><li><a href="executive.html">Executive</a>      </li>
    <li><a href="policy.html">Policy</a></li>
    <li><a href="organizations.html">Organizations</a></li>
    <li><a href="bios.html" class="MenuBarItemSubmenu">Bios</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
</ul>
</div>
</div>
<p>
<p>
<div id="apDiv1">
    <div id="apDiv4"></div>
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="265" wmode="transparent">
      <param name="movie" value="Components/CandidatesHomeSlideshow.swf" />
      <param name="quality" value="high" />
       <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="Components/CandidatesHomeSlideshow.swf" width="550" height="265" wmode="transparent">
        
        <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object><div id="HomeEvents">
      <p> </p>
      <p> </p>
      <div id="EventsXML">
        <div spry:region="event2">
          <dl spry:repeatchildren="event2">
            <dt>{date}</dt>
            <dd>{title}</dd>
            <dd>{location}</dd>
          </dl>
        </div>
      </div>
    </div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Sorry if it's something really basic...I'm a noob to web design.
Thanks!

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Spry menu bar submenu disappears when cursor changes

Hello.
I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
Can anyone tell me how to prevent that from happening?

LICAP Webmaster wrote:
Can anyone tell me how to prevent that from happening?
Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
If you put your test page and all dependent files online, and post a link here, we will gladly check that:
    Your server is working
    That all required HTML code is correct
    That your folder hierarchy is correct
    That all required dependent files (HTML, CSS, JS, Images etc.) are uploaded to proper folders
    That Javascript Versions are correct
    That link paths are all correct and case sensitive
Sounds like your submenus may be positioned with a small gap from your top-level links

Spry Menu Bar Submenu not dropping.

Hi,
I,ve got a problem with the Spry Bar Menu Bar....The Submenu is not dropping when I preview the page in a browser. Would be great if somebody could help me out here.
Many thanks in advance.

Hello Wiebke,
to my knowledge that's not a reason. Murray has often answered to ftp problems, last thing I've noticed was: "If the files are being uploaded to the correct location, then they must overwrite the existing files in that location. If you are not seeing those changes in the browser, then you must be looking at a stale page in the browser - dump your local browser cache and try again. So, make sure that the files are being properly uploaded, and that your browser is fully refreshed." and from osgood "Have you tried an alternative ftp upload client other than Dreamweaver?".
The last hint is that what I prefer. In all in these cases I'm not a friend of a detailed troubleshooting. It is one of the reasons that I prefer an external FTP program. The difficulties with which you have to fight encourage me in this opinion, not least because we always search for experts, we don't charge a "jack of all trades".
For this reason, to manage, for example, several websites or to upload my files and sometimes for the opposite way, for a necessary download from my server or to use a "a site-wide synch", I'm using FileZilla. It simply looks easier for me to keep track of all operations precisely and generate or reflect easily the desired tree structure.
Above all, FileZilla has a feature (translation from my German FileZilla) called "compare file list". Here it's possible to use file size or modification time as a criterion. There is also the possibility to "hide identical files", so that only these files which you want to redact remain visible.
And even if it means you have to install a new program, I am convinced that there is an advantage. Here is the link to get it and where you can read informations about how it works:
http://filezilla-project.org/ and
http://wiki.filezilla-project.org/Tutorial#Using_the_site_manager
Mac: Mac OS X
http://filezilla-project.org/download.php
Of course, you also need all the access data to reach your server.
Good luck
Hans-Günter

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">

</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’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’s For a Night to Remember</h3>
    <p>It's certainly one you're unlikely to forget—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>

Spry menu bar woes (add submenu levels and edit width)

So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one. So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise: when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>
the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code? i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull. Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
HTML code for the menu:
<tr>     <td><ul id="MenuBar1" class="MenuBarHorizontal">       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>         <ul>           <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>               <li><a href="#">music Sources</a></li>               <li><a href="#">amplifiers</a></li>               <li><a href="#">paging</a></li>               <li><a href="#">speakers</a></li>               <li><a href="#">microphones</a></li>             </ul>           </li>           <li><a href="#">racks and stands</a></li>           <li><a href="#">cables</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a>         <ul>           <li><a href="#">Who are we?</a></li>           <li><a href="#">history</a></li>   <li><a href="#">contact us</a></li>   <li><a href="#">philosophy</a></li>   <li><a href="#">careers</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a>         <ul>           <li><a href="#">catalogs</a>            </li>           <li><a href="#">manuals</a></li>           <li><a href="#">software</a></li>           <li><a href="#">documents</a></li>           <li><a href="#">pricelists</a></li> </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li>     </ul></td>
sprymenuhorizontal.css:
@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: 14px;      cursor: default;      width: 1010px;      font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ 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;      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 {      list-style-type: none;      font-size: 100%;      z-index: 1020;      cursor: default;      width: 166px;      position: absolute;      left: -1000em;      background-color: #6C6C6C;      height: 0px;      margin-top: 0px;      margin-right: 0em;      margin-bottom: 10px;      margin-left: 0em;      text-align: right;      text-indent: 0em;      padding-top: 0px;      padding-right: 0em;      padding-bottom: 0px;      padding-left: 0px;      border-top-width: 1px;      border-right-width: 1px;      border-bottom-width: 1px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #666;      border-right-color: #666;      border-bottom-color: #666;      border-left-color: #666; } /* 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;      height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      height: 41px;      margin-top: 0%;      margin-right: 0%;      margin-bottom: 0px;      margin-left: 162px;      float: right; } /* 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 #666;      background-color: #6C6C6C;      height: 0px;      padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #6C6C6C;      padding: 0em;      color: #FC0;      text-decoration: none;      font-size: 14px;      margin-left: 0em; } /* 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: #FC0;      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: #FC0;      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: 98% 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: 98% 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: 98% 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: 98% 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;      } }[/SPOILER] any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...

since the layout of the pasted text got all weird, here i'm trying it again.
sprymenubarhorizontal.css:
@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: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
/* 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;
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
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
/* 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;
height: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 166px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
/* 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 #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
/* 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: #FC0;
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: #FC0;
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: 98% 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: 98% 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: 98% 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: 98% 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;

Spry Menu Bar using CSS background image without losing submenu ( V) indicators

Spry menu bar sets the down and side submenu indicators using
a positioned background image. I have a requirement to use a
specific background image yet must retain the > and v submenu
indicators. Without having to generate full width custom background
images for each of the menu item types to include the side and down
menu indicators, is there anyway to use a generic background image
and show the indicators using just CSS?

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Add third level submenu to spry menu bar

I want to add a third level submenu to my Horizontal Spry
Menu Bar. I have read that I cannot do this in design mode but
rather have to program it in using the code view. Does anyone know
how to accomplish this? Thanks so much!

Its OK! I've just found an answer:
http://forums.adobe.com/message/1049136#1049136
PS. I did searching before I posted - but I didn't spot this till afterward

Vertical Spry menu bar--adjusting bottom submenu

I'm trying to adjust the last submenu on my vertical Spry menu bar. Originally, the submenu caused the page to either expand when I moused over the submenu (in IE), or the page would load with white space below the footer in order to accomodate the submenu when I mouse over it (in Firefox). The adjustment I want is to move the submenu up so that neither of those things happen. I've made the adjustment appear exactly how I want it to in Chrome and Safari, but IE, Firefox, and Opera now have the submenu placed halfway up the page. I can post the code if it's helpful, but I do not have the site hosted anywhere at the moment. The adjustment I made is in the Spry menu's css:
ul.MenuBarVertical ul#last
margin: -205% 0 0 95%;
Any help is appreciated. Thank you!
Sarah

Thanks for the reply. After changing the code to your suggestion, now the submenu loads approximately 80px below the last menu item in all browsers except IE. In IE, the submenu looks the way it did straight out of the box. Any other ideas to try?
Sarah

Spry Menu Bar - Freezing the Menu item in hover when clicking a submenu item

Hi,
I am trying to add a feature to a verticle spry menu bar that freezes the menu item or "parent" (to apear to be hovered) when clicking one of the parents sub-menu items. I want to do this so that users can know how they arrived at the page they're on.
Thanks for your help,
-Shiva

To look at your intention in a different way,
Hover over a submenu item
Parent item is colored/indicated
Submenu item is colored/indicated
Click on the submenu item
New page opens
Parent item "remains" colored/indicated on the new page
There are three or four ways to do this, depending on your site setup, but one basic concept to understand. The emphasis on the Parent menu item is totally independent of whether you got to the new page via the menu or by some other means. The emphasis will always be there, though it will appear to be connected to your clicking on the menu!
Say you have a menu with two Parent menu items, flowers and trees.
On the Flowers menu are submenus: Tulips, Roses, and Gardenias, On all three different Flowers pages (Tulips, Roses, Gardenias), the Flowers parent item will be emphasized.
On the Trees menu are submenus: Oak, Maple, Spruce. On all three different Trees pages (Oak, Maple, Spruce), the Trees parent item will be emphasized.
If you want to go in to each page individually, you can use a general indicator like id="localemphasis". (To emphasize more than one thing on a page, use a class instead of an id)
Using this method, on the Tulips, Roses, and Gardenias pages, put id="localemphasis" on the Flowers parent menu item.
On the Oak, Maple, and Spruce pages, put id="localemphasis" on the Trees parent menu item.
To control the emphasis from the CSS stylesheet, you won't need to go into each page, but you will ID each parent menu item.
Give each 'category' (Flowers, Trees) page a body ID to match the category
Every Flower page wants the Flower parent menu item emphasized, give all three Flower pages a body tag like this: <body id="flowers">
LIkewise, every Tree page wants the Tree parent menu item emphasized, as <body id="trees">
Within the menu itself and on ALL pages, give each parent menu item an id to correspond to its category
<li id="flowers_m">Flowers</li>
<li id="trees_m">Trees</li>
          I have added a "_m" to remind myself that it is the menu item's id. You might need to put the id on the <a> link if you have not used a list for your menu.
In your CSS stylesheet,
   #flowers #flowers_m,
     #trees #trees_m {background-color: red; color: white;}
Please use your own code! White on red might not be your cup of tea...use the same styling as the "hover" styling you mention in your query.
To interpret what we have just done, we have said
     make the background-color red and the text white
for the parent menu item Flowers (id="flowers_m") when you are on a Flowers page (body id="flowers")
and for the parent item Trees (id="trees_m") when you are on a Trees page (body id="trees").
This emphasis is good feedback for your user...remember that for SEO purposes, you will also want to use actual HTML text to reinforce the page environment, that is, h1 titles like FLOWERS and TREES. That will provide more feedback for your user.
Beth

Help with Spry Menu Bar 2.0 (vers. 1.0) - Placement of customized styles files

Hello:
I would like to congratulate the authors of the new Spry Menu Bar Framework 2.0 (vers. 1.0) -- it has truly been an advance and over the previous generation, and is much more user friendly for those without extensive knowledge of the spry framework. I have also appreciated the tutorial created by David Powers that is found on the Adobe labs site, and find that it has been very helpful.
However, I do have one general question that I would seek some clarification before completing the task of deploying the widget in its final form. I have gone beyond the tutorial insofar as I have customized the styling to allow me to use background images for the menus and submenus in both static and hover states. I have also gone directly (with add of the tutorial) to work on my own site rather than recreating the bayside tutorial. I know have my styles embedding into a template page (.dwt).
My question is whether those styles embedded in the head of the template page should be transferred to a separate styles page and attached (or possibly included in the styles page that handles the CSS for the layout aspects of my site), or whether it should overwrite the styles included in the basic styles skin for the widget. The latter seems the most likely answer, as many of the classes are for the same names as those in my template page, but have different (and conflicting settings). However I wanted to make certain of this before proceeding.
Once again let me thank those responding to this query in advance for the helpful tips I have received along the way, and that will likely follow this post.
I could post the css and the html with this querry, but I hope I have explained the question well enough that a general response will be all that I need.
Thanks again for the help.
Steve Webster

Thanks for your helpful response.
I had already tried the various options (overwriting basic styles, skins, etc) and quickly learned to back track as they were definitely not the answer to the question I posed. I then included them in the customized style sheet for the entire site and clearly de-marked them as styles governing the spry menu widget 2.0 (1.0) with the warning that future developers working on the site should use care in amending them, and warning that they be remain included in the general styles file.
I was going to indicate in response to my own query that this seemed to be the best practice, but your response confirmed what I had learned.
Thanks once again for your helpful advice and intervention.
Steve Webster.

Spry menu bar changed since I tried to split cells in a table! Help!

I am VERY new to web design, so I apologize in advance for being ignorant. I am trying to learn!
I had inserted a spry menu bar that looked fine and even tested fine!
I subsequently tried to split a section of my table in the web page in order to have 3 columns of centered text. The first time I did this, the spry menu bar became vertical even though it is listed as horizontal. I looked up a forum answer, copied the code from the suggestion, and that seemed to fix the problem (although I still don't know what EXACTLY happened)
I tried to split the table again (I had undone everything prior to this), only this time, the spry menu bar is located outside the page in the left hand corner where my background (I have a wrapper) is. I tried opening another page where I already had a nice spry menu bar, and it did the same thing!! This makes me think it is the CSS sheet for the menu bar that was modified somehow when I split the table. I'm pasting the CSS here below, so if anyone sees any issues that might cause this problem, please let me know!! I have been working for the most part in design view, and haven't really modified the code other than to put a wrapper in and a facebook like button, which I've now lost in the slitting cells catastrophe. Thanks in advance!!!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* 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-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
list-style-type: none;
font-size: 12pt;
cursor: default;
width: 60%;
float: left;
/* 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: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-color: #99CC66;
/* 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: auto;
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: auto;
/* 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: #99CC66;
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: #336600;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Well, I took a picture of my dreamweaver screen, so you can see what I am looking at...
You can see that the spry menu bar shows up in the top left corner in my design view, but on the website, it is located in the correct place! Maybe it is a Dreamweaver problem??? This happened when I tried to split the cell underneath the section that says "Let NOLA Scribes help you!" into 5 cells so that I could insert 5 differnet pictures and captions. Now, when I open the other linked pages in Dreamweaver, it does the same thing! I'm using an older version of Dreamweaver, but from what I read, that shouldn't be an issue. Thanks in advance for your help!

Spry H-Bar SubMenu Placement

Similar Messages

Maybe you are looking for