The Ten Commandments for Editing Dreamweaver’s Spry Menubars

by James Cook on April 21, 2010

See also: Creating and Customizing Horizontal Spry Menu Bars and Creating and Customizing Vertical Spry Menu Bars

Adapted from my Dominate Dreamweaver online training course.

Back in the day, the Hebrews had a habit of getting themselves into trouble in spite of their favored status with God. So he decided to try to make it easy on them by reducing the rules to Ten Commandments.

In search of similar guidance from a lesser deity (Adobe), I ventured to the top of our local equivalent of Mount Sinai where I received these Ten Commandments for Editing Dreamweaver’s Spry Menubars on a stone iPad.

  1. Thou shalt not edit the style sheet without reading the comments.
  2. Thou shalt not edit the styles haphazardly.
  3. Verily, rules for some selectors are defined in two locations.
  4. Thou shalt not edit the position or display properties within the menubar styles.
  5. Thou shalt not use the height property within menubar styles.
  6. Thou shalt not apply padding, borders or margins to menubar list items <li>.
  7. Thou shalt not set widths for links <a> within menubars.
  8. Thou shalt not edit the browser hacks.
  9. Thou shalt not edit the menubar JavaScript file.
  10. Verily I say unto you, a new style shall appear to define the appearance of submenus.

Click a commandment above to view the related commentary.

I. Thou shalt not edit the style sheet without reading the comments.

Some very clever person at Adobe (God bless them) hath taken the time to insert extensive comments into the code of the menubar CSS file. Open the CSS file and read those comments and you shall be enlightened (and save a lot of wasted effort).

II. Thou shalt not edit the styles haphazardly.

Adobe hath joined the various styles rules together to function in harmony. Editing them without a clear plan and understanding of their purpose is guaranteed to create more problems than solutions.

A good plan is to edit styles according to the structure of the HTML page (and for that matter the order the styles appear in the css file).

  1. Overall list (ul.MenuBarVertical or ul.MenuBarHorizontal)
  2. Top-level list items (ul.MenuBarVertical li or ul.MenuBarHorizontal li)
  3. Overall sub-menus (ul.MenuBarVertical ul or ul.MenuBarHorizontal ul – notice the second ul)
  4. Sub-menu list items (ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li)
  5. Links (styles related to the <a> tag including hover, focus, etc. states)

III. Verily, rules for some selectors are defined in two locations.

Adobe hath divided the LAYOUT INFORMATION from the DESIGN INFORMATION (not a bad idea) so rules using the same style selectors may appear in both locations. You can edit them in either place but make sure the properties you set in the layout section aren’t overwritten in the design section.

IV. Thou shalt not edit the position or display properties within the menubar styles.

Those who have not yet eaten the fruit from the tree of CSS knowledge are often tempted to edit the position and display properties within the menubar styles. While some sins go unpunished, this one rarely does. It WILL break your menu. And, while we’re on the subject, don’t go adding position or display properties to the style rules that don’t have them either.

V. Thou shalt not use the height property within menubar styles.

It’s very tempting to try to “force” your menubar to conform to your design by defining a CSS height property for one or more of the menu elements and you might get away with it. But the odds are that, under some conditions, one of your menu items will wrap to a second line and the height properties you so meticulously set will be ignored or your links partially obscured.

To be delivered from this evil, the best practice is to allow the height of your menu and menu items to be determined by a combination of the text-size and padding of your menu link <a> style.

VI. Thou shalt not apply padding, borders or margins to menubar list items <li>.

Set the width of your menubar “buttons” using the list item <li> rules. Since, as it is written, padding, borders and margin add to the width of HTML elements, applying those properties to list items will likely break your design.

Apply padding and borders to your buttons using the link <a> rules.

VII. Thou shalt not set widths for links within menubars.

In the commentary for Commandment VI we learned the width of our buttons should be set using the list item style rules. Any attempt to set a width for the links will likely conflict with those settings. But be not afraid, because the display: block property in the link style rule guarantees the link will completely fill its parent li tag.

VIII. Thou shalt not edit the browser hacks.

What CSS hacks Adobe hath joined together, let no man set asunder.

IX. Thou shalt not edit the menubar JavaScript file.

Yeah though you walk through the valley of Javascript, you shall fear no evil (if you just leave it alone).

X. Verily I say unto you, a new style shall appear and it shall define the appearance of submenus.

And God said, “let the styling for the sub-menus be separated from the styling of the main menu.” And it was, with the addition of a new style rule, so.

By creating a new style rule (ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li for submenu list items and ul.MenuBarVertical ul a or ul.MenuBarHorizontal ul a for submenu links – notice the second ul in the selectors) you can define CSS properties that apply only to submenus (or more precisely to unordered lists that are themselves within an unordered list). And, by the way, you only have to define the properties that you want to be different from the main menu. The rest of the properties will be inherited.

Now, go forth and sin no more.

Rhiannon April 13, 2014 at 7:16 pm

Using CS5.

Having issues with the Spry menu bar in different browsers. Currently seem to have Chrome working perfectly. IE is a mess and a few issues with Firefox.
Also, I deleted 2 lines of code to get to work on touch screen devices (code was hidedelay and showdelay for submenus). Any help would be appreciated.

Thank you,
Rhi

maissa March 30, 2014 at 12:07 pm

Hello! I’m having problems to display my submenu in my spry menu bar. Itactually does not work on my pc but on my friends’ pc it’s working! Can you please help me! Im also connecting my submenu and menu to my database.

Helen Geach February 3, 2014 at 3:18 am

Hi Please can you help me. I have been having problems with a spry menu bar within one particular site. First I would amend all attributes, colour font size etc and I could see it clearly within design view but after uploading it would only appear as the default setting in a live view.
So i stripped out all spry coding and opened a new page outside of this site, created a new spry menu bar and then saved this page to existing site. This seems have solved the first problem but now it is appearing as linked text instead of a nicely functioning spry menu bar. This is again only when viewed live but looks fine in design view. Any ideas what I have done. I’m assuming that I have missed something vital in the coding, your help would be much appreciated. Thanks Helen

Erin January 17, 2014 at 4:51 pm

Just wanted to say the IE fix that you posted for Matt O solved my IE spry problems – THANK YOU!

jjdeb March 8, 2012 at 10:05 am

my spry menu bar isn’t showing up in IE. Only when the item is hovered over. Could you lend me a hand? upej.com is the test site.

dwcourse March 8, 2012 at 10:16 am

In this case you’ll probably need to break commandment VIII. Since you used a background image in ul.MenuBarHorizontal li rule (rather than in the link (ul.MenuBarHorizontal a) it is being overwritten (for IE only) by this rule in the browser hacks.

ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}

Use of the background property resets all background properties (background-image, background-position, etc.) If they aren’t specified, they return to the default value (which for background-image is none).

So you’ll need to edit the browser hack or move your background-image to the link from the list item tag.

Mags February 17, 2012 at 2:57 am

My menu, including drop downs, was working fine in IE 8/9, Chrome and Firefox but an image just below it dropped about half inch in IE6/7. I was advised to add overflow: hidden to the menu as the container had collapsed. This pulled the image back up, but now the drop down menus are not working in Chrome and Firefox but are still ok in IE8/9.

Any ideas as to how to resolve this?

dwcourse March 3, 2012 at 10:59 pm

I’d need a link to the page to be able to offer any help.

Donna Pomario February 16, 2012 at 1:06 am

Hi. I have managed to create my horizontal bar without too many problems, but when I view it on one of the other computers in our office, the drop down menus fall behind my flash panel, which i have put into a table in a row on its own. Do I need to wrote some code which specifies which item must take preference, and if so, how do I go about doing this?

Thank you.
Donna

dwcourse March 3, 2012 at 10:58 pm

The problem isn’t Dreamweaver or your menu. It’s how some browsers display Flash. You need to add a wmode=transparent parameter to the Flash embed code.

William November 30, 2011 at 7:53 am

Hello again. I have another roadblock that is driving me nuts. I hope you can assist!! I have uploaded my site design thus far, but the spry menu bar is just linked text!! I uploaded the whole folder, with the spryassets folder, so I have no idea why this is happening. Here is the link:

http://williambuchina.com/africa/index.html

Any thoughts????

Thanks a lot.
w

dwcourse November 30, 2011 at 8:33 am

The link to your javascript and CSS file are wrong. For instance the link to the CSS file is “../../SpryAssets/SpryMenuBarHorizontal.css” but the Spry Assets folder is in the same folder as your file so the link (at least for that page) should be “SpryAssets/SpryMenuBarHorizontal.css” or “/africa/SpryAssets/SpryMenuBarHorizontal.css”

William November 30, 2011 at 8:55 am

Hi, thanks. So, I have gone in and removed the ../../ from all links within the menu bar, but how can I change the actual link to the CSS file? I am sorry if the question seems stupid…I am so confused by all this. Thanks again.

dwcourse November 30, 2011 at 9:30 am

If you have your site set up correctly (Site Setup in Dreamweaver CS5 and CS5.5 or Define your site – CS4 and earlier) it shouldn’t be necessary to change any links. But, after the fact, you can change the links to the CSS and JS files in the of your document. They look like this:

<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

William November 26, 2011 at 10:51 am

Hi. Thanks for your post. I have created a menubar in this site:
http://williambuchina.com/clinic/index.html
And it works ok thus far, but when one of the dropdown buttons does indeed drop down, it is surrounded by a sort of ‘frame’, and also it is not aligned (flush left) as it is in my dreamweaver file. any ideas? I am new to this, so that is my excuse.

Thanks!!

dwcourse November 26, 2011 at 11:08 am

Looks like you did the menu and then found this page. It would have been helpful if you’d come here first, it’s always easier to avoid problems than work you way out of them.

Anyway the border comes from this rule:

ul.MenuBarHorizontal ul {
border: 1px solid #CCCCCC;
}

Delete the border property. You can also use that same rule to set the padding on the submenus to 0 (which, I believe it was in the default style sheet) to move the submenus directly under their parent menu item.

ul.MenuBarHorizontal ul {
padding: 0;
}

William November 26, 2011 at 11:51 am

Thanks a lot for such a quick reply.
I have gone back in and fixed the padding issue.

However, I cannot seem to locate the ‘border’ rule within the Styles.

I looked into the code and all instances of ‘border’, seem to be set at 0.
Any ideas….any more ideas, I should say.

And…one more question: Can I set a rule so that there is space between each button?

http://williambuchina.com/clinic/index.html

Thanks so much for your help!!
w

dwcourse November 26, 2011 at 12:00 pm
William November 26, 2011 at 12:03 pm

Great. Thanks, you’ve really helped me out a lot. It’s greatly appreciated.
w

janie June 14, 2011 at 10:29 am

I have tried to create a simple spry menu bar and it works on homepage/template but does not show on other linked pages. It looks like a hyperlink on other pages. Any help would be appreciated

jcook June 14, 2011 at 10:42 am

It sounds like the link to your CSS style sheet is missing or broken on some pages. If you posted the pages and gave me a link I could take a look and be more specific.

Megan May 10, 2011 at 9:32 am

Thanks for your tutorials, they have provided much help.
I’m having an issue with the drop downs on a horizontal menu on Firefox – they don’t show up.
Any suggestions on how I can fix this?

jcook May 10, 2011 at 11:47 am

I’d need a url to look at the page to be able to answer that. But, off the top of my head, have you changed any of the position properties in the css and does the menu work in other browsers?

Adam Bromley March 9, 2011 at 5:43 am

Hi, I am trying to create a spry menu bar with a custom top image and the pulldown a plain green. URL http://www.visiongreeninvestments.org/pages/test.html
If I add a background image to ul.MenuBarHorizontal a it appears on all the buttons that don’t have a pulldown but leaves the green on those that have a pull down. Also, even when I edit the style ul.MenuBarHorizontal a.MenuBarItemSubmenu to background image:none it still leaves the custom image on the pull down but not on those links that have a pull down on the top. I’ve gone back to the original plain green so I can start afresh in case I made mistakes in the CSS. I would be very grateful if you could tell me where to go from here. I’ve been all over the web for 3 weeks to find a solution but so far unsuccessful. It seems like it shouldn’t be such a hard thing to do. Thanks so much for any help.
Adam

jcook March 10, 2011 at 10:59 am

The “buttons” with a pull down are controlled by the ul.MenuBarHorizontal a.MenuBarItemSubmenu style rule (the default background-image there provides the arrow).

The button in the submenus are controlled by the ul.MenuBarHorizontal a rule (same as top-level buttons).

You can create a custom rule for submenu buttons by adding at ul.MenuBarHorizontal ul a rule (notice the extra ul)

Hope that helps. If not perhaps you can clarify your issue a bit more.

azzzu December 7, 2010 at 5:34 pm

Hi

I am having many issues with this.

Basically i want to create a menu with four top level items and some of these have sub items.

I need the entire menu bar be the width of the page, so i changed width to 100% and that seems to work

However i want the submenus to open up downward and be the size of the top level menu item it belongs to, so i thought changing to 25% would do it, but it does not. My menu is totally messed up now.

If i wanted to change the background color, hover colour (of both top level and submenu items), and the width size of top level and submenu items and make the entire bar fit into the width of the page. Which CSS should i touch and what properties in them?

Thank you!

jcook December 7, 2010 at 9:08 pm

A link would help but you probably want the submenus to be 100% (of the width of the top level menu item).

matt o November 8, 2010 at 6:11 pm

I am working on a site and everything is working fine. Ok, I lied, everything is working fine EXCEPT for IE, (imagine that). The spry looks and works like its supposed to in firefox, chrome and opera. It’s a js problem and I have no idea what to do, can anyone help me? ntlgrass.com/index1.html

jcook November 8, 2010 at 6:29 pm

First, I believe you need to delete teh background property in this IE-specific rule:

/* 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;
}
}

Then in the ul.MenuBarHorizontal ul rule (which controls the width of submenus replace width:auto with an actual value.

matt o November 10, 2010 at 4:36 am

Thou art a wondrous being sent from above!! Thank you :)

Ryan October 21, 2010 at 10:11 pm

I agree with eaten joe. You really need to know what you’re doing to easily style spry menus. I got the impression is was supposed to make life easier but I’ve been battling for ages on my menu bar. I mean even Stephanie Sullivan got caught out!!
But thanks for the post anyway, I will try to go through it carefully and learn my way around the spry menu. Great post for those in the dark, which basically sums up everyone that’s ever attempted using the spry menu.

Raymond July 23, 2010 at 12:32 pm

I’ve basically broken all this commandments at one time or another (mostly this project I’m working on). LOL Does anybody now how can i change the sub-menu of the sub-menu items and make it different from the menu? I placed a gradient background on the menu but clearly the sub menu inherits that property. Should i give the sub menu a different class? Thanks

jcook July 23, 2010 at 1:07 pm

Build on commandment #10. Just as you’d add a ul.MenuBarVertical ul li style rule for submenus, you can add a ul.MenuBarVertical ul ul li (note that ul appears three times) style rule for sub-submenus.

Ashraf Khan July 19, 2010 at 1:42 pm

I have use spry horizontal drop down menu, for one of our web site its work fine in mozilla & google chrome but in IE its not even show the NAVIGATION BAR of spry which i have use. please give me solution what i have to do that its also work fine in IE.

jcook July 19, 2010 at 2:05 pm

It’s not magic. You have a problem in your code but I can’t tell what that is unless I can see the page and CSS.

eaton joe June 1, 2010 at 2:26 pm

It seems odd that Spry in general especially the submenu has so much issues. it may be worth taking a statistics on the problems generated by spry. you only need to look at the forum questions and you will quickly conclude that dreamweaver spry seems to be more trouble than solution

jcook June 10, 2010 at 4:14 pm

Actually, in my experience, the problem is that the people editing the menus just aren’t familiar with way they are structured. The CSS involved in creating pull-out menus isn’t exactly trivial no matter what solution is used.

Elizabeth Marshall April 27, 2010 at 10:39 pm

JC, I like the way you think…I think along the same lines, and teach my students and others the same principles. I would also add to II: change one thing at a time, and check it immediately in a browser. If it does not do what you thought it was going to do, take it out before you change anything else. Garden-path editing (and mixing layout with design) causes more questions and broken menubars than any other habit.

Ben Pleysier April 26, 2010 at 11:28 pm

Very good article that advocates exactly what I have been saying all along.

I would like to add my two bobs worth, the 8th Commandment should have a little note attached to it which reads:
except for background-color change.

jcook April 27, 2010 at 7:24 am

You’re correct! The ul.MenuBarHorizontal li.MenuBarItemIE rule in the BrowserHacks does indeed have a background-color property that you can edit with impunity. However if you have a background-color property for your links, it usually won’t be necessary to edit it.

Stephanie Sullivan April 28, 2010 at 10:40 am

Love this! ;)

And yes, I was bitten by the background-color property issue just last week. Took me forever to figure out that the white background in IE only (for my transparent menu) was being brought in through that hack. I usually just ignore those browser hack/fixes. ;)

Chris April 22, 2010 at 1:44 pm

there are some free widget themes on adobe devnet. they have the sliced photoshop files too. http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design.html

Corrosive April 22, 2010 at 2:58 am

Great post JC. Definitely gets the point across and written in an entertaining way. There’s no excuses for those Spry posts on DWC now.

Randy Edmunds April 21, 2010 at 5:48 pm

The Spry style sheets should not be edited at all. Create a new style sheet, attach it after the Spry style sheet, and override the Spry styles instead. This way you can always, quickly get back to the original widget.

jcook April 21, 2010 at 6:17 pm

Good point, I should have just said styles when I said style sheets.

You suggest an excellent way to go about it. Personally I like to apply a “custom” style class rule to the body tag ( and then overwrite the rules in the Spry stylesheets by creating a new style.

For instance to overwrite the ul.MenuBarVertical li rule…
…create a new rule .custom ul.MenuBarVertical li

In any case the Commandments still apply.

DanGle neck November 16, 2010 at 10:57 am

Randy, thanks for the suggestion to “Create a new style sheet” that worked wonders. I started over using the original SpryMenuBarVertical.css and included a “menubar5.css” style sheet afterwards to just override the style attributes that I needed to.

I had to break rule: “IX. Thou shalt not edit the menubar JavaScript file.” because I wanted a different background image for each menu item. But I took your advice and treaded lightly and carefully. I just tweeked the “this.hoverClass” code. If interested, see http://www.dei-ideas.org/inc//SpryAssets/SpryMenuBar5.js

As for rule: “V. Thou shalt not use the height property within menubar styles.”. On the NEW “menubar5.css” override style sheet, I was able to OVERRIDE the height on the following styles with no problems: “ul.MenuBarVertical li” and “ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus” and “ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible”. BUT I have no 2nd level of menus, and also broke rule: “IX. Thou shalt not edit the menubar JavaScript file.”

As for “VIII. Thou shalt not edit the browser hacks.” I had a background image, so in the IE-specific rule, I had to comment out the “background: #FFF;” — with no problems, like follows.

/* 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.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
/* background: #FFF; ** DAN: COMMENTED OUT */
}
}

jcook November 16, 2010 at 12:10 pm

Dan,

Thanks for your comments. For the most part these rules are guides for people with considerably less experience than you. If you really understand what you’re doing you can break them and get away with it. But, if you’re a CSS and Spry rookie, they can help you avoid a lot of issues.

Randy’s suggestion to create a separate style sheet is an excellent one. And editing the browser hack as you did should probably be mentioned as a specific exception to rule VIII.

Using the height property can cause issues when the links wrap to two or more lines rather than a single line. You can get away sometimes with it but often causes issues and you’re generally best off avoiding it.

Comments on this entry are closed.

{ 2 trackbacks }

Previous post:

Next post:

Home | Make Contact