Creating and Customizing Vertical Spry Menu Bars in Dreamweaver

by James Cook on July 17, 2007

If you enjoy this tutorial, you may be interested in our Dominate Dreamweaver online training. Our 12-week online course which takes your from the Dreamweaver basics through building complex spry menubars and much more.

Note: This is our second tutorial on customizing Spry menu bars in Dreamweaver. The first covered customizing horizontal spry menus. Many of the steps for creating and customizing vertical menu bars are the same as those for horizontal menu bars. That information is repeated here so you won’t have to refer back to the previous article.

As I’ve said already Adobe has documented the CSS files that control the appearance of the menu bars with ample notes to guide the adventurous. They’ve also included a help file that’s actually helpful. You can use the information you'll find there to expand on the lessons of this tutorial.

Getting started:

Before you begin, make sure you have properly defined your website within Dreamweaver.

Creating a vertical menu bar:

  1. Open an existing document or create and save a new one. Dreamweaver CS3 won’t allow you to add a menu bar to an unsaved document. If you try, you’ll be prompted to save the document before proceeding.
  2. Select the location in your document where you want the menu bar to appear.
  3. Select the Spry tab in the Insert palette. (If the Insert pallet is not visible, select Insert from the Windows menu to display it.)
    Dreamweaver CS3 Insert Palette
  4. Click on the Spry Menu Bar icon in the Insert palette.
  5. You will be asked to select horizontal or vertical for your menu bar layout. Since we’re making a verical menu bar, select verical and click OK. Your menu bar will be placed on the page.
  6. Immediately save the document. You will be informed that your menu bar requires a number of supporting files and prompted to save them. Click OK and DW will save the files in a SpryAssets folder it will create within the root folder of your website.
  7. With the menu selected, you can use the Properties palette to define the links, menus and submenus of your menu bar (to select the menu bar, click on the blue box labeled “Spry Menu Bar for xxxxx” that appears immediately above your menu bar).
    Dreamweaver CS3 Menu Bar Properties Palette
    Note that the Properties palette also contains a link, “Customize this widget.” That leads to the Help file that you are hoping to ignore by reading this. Take my word for it, clicking that link will be worth your while. Go ahead, I’ll wait for you.

Customizing the look of the menu bar:

Vertical StylesGood, you’re back. In case you didn’t figure it out from the help file, I should let you know that the look of your menu bar is controlled by the styles in the CSS file (SpryMenuBarVertical.css) that Dreamweaver graciously created in the SpryAssets folder. Since we’ll be editing these styles, you’ll need at least a minimal understanding of CSS styles in DW.

Type style and size:

DW does not specify styles for the text in its menu bars so the style attributes are picked up from the page element(s) that enclose the menu bar. If you would like to use a specific font, size, weight, style, variant or case attribute for ALL the text in your menu bar, specify it in the ul.MenuBarVertical style. The color of the text will be defined elsewhere.

Menu bar width:

Note: This is the area that differs significantly from the procedure for customizing horizontal menu bars.

By default, the width of the top-level menu and each menu item is set to 8 ems.

To specify a specific pixel width for the top-level menu: In BOTH ul.MenuBarVertical and ul.MenuBarVertical li styles replace width: 8ems with width: XXXpx.

Note that changes made to ul.MenuBarVertical and ul.MenuBarVertical li affect only the items in your top level menu. The width of pull-down menus is not affected.

Menu bar height:

Caution! You can control the height of items in your menu bar by specifying a height attribute in the ul.MenuBarVertical a style. But be careful. This can cause type to be cropped or even disappear if text is resized or a menu item unexpectedly wraps to a second line. It’s more flexible to let the height of your menu items be determined automatically by the font-size (specified in ul.MenuBarVertical) and the padding (specified in ul.MenuBarVertical a).

Color of menu items:

The color of menu items in the link state (when they are not being hovered over or clicked) is determined by the ul.MenuBarVertical a style. To change the look of your menu items, simply change the default background-color and color styles DW has provided. This is also the place to add borders if you want to visually separate the menu items.

Rollover color of menu items:

To keep it simple, set the background-color and color styles to your preferred rollover colors in the following two style definitions:

  1. ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
  2. ul.MenuBarVertical a.MenuBarItemHover, etc.

In THEORY, the first definition determines the hover state of menu items and the second definition controls the appearance of menu items with open submenus. In REALITY that’s the way it works in Explorer. However in Firefox and Safari BOTH the hover state and the appearance of menu items with open submenus are governed by the second definition. I usually just make sure both definitions have the same settings for background-color and color and forget about it.

Menu bar arrows:

In DW’s vertical menu bars, menu items which open to submenus have a right-pointing arrow at their far right edge. These arrows are actually background images. If you change the background color of menu items or their rollover state, the arrows may become difficult to see.

To change the arrows, edit the background image attribute in the appropriate style definition as described below:

  • Edit ul.MenuBarVertical a.MenuBarItemSubmenu for menu items with a submenu.
  • Edit ul.MenuBarVertical a.MenuBarItemSubmenuHover for the hover (rollover) state of menu items with a submenu.

For reference, DW makes available the following images in the SpryAssets folder:

  • SpryMenuBarRight.gif - black arrow pointing right
  • SpryMenuBarRightHover.gif - white arrow pointing right

Need More Dreamweaver Tips, Tricks & Tutorials?

If you'd like to receive more Dreamweaver tutorials like this, subscribe to my newsletter by completing the email form below:

jitesh shinde March 1, 2012 at 2:18 am

I want to creat spry menubar with diffrent width of buttons. I try it but all buttons give same width .

dwcourse March 3, 2012 at 10:44 pm

To do that you’ll need to create a unique style classes to apply a width for each menu item. And then apply the styles to the appropriate link or li tag.

nichlee November 22, 2011 at 5:54 pm

I am attempting to use the Vertical Spry Menu Bar Widget on a website and have customized it. It works beautifully in Safari, Firefox and Chrome but fails in IE (8) & (9). The MenuBarItemSubmenu has no background-color (transparent) with white text, while the items have a light blue bkgd with dark blue text. When I view the site in IE the background is white with white text at both levels.
Great info on this site, but I couldn’t find this particular fix. I tried the transparency code/css3 but I couldn’t figure out how to apply it only to a background image of a menu item, the whole item is transparent. I would really appreciate some help with this. I’m currently using Dreamweaver CS4. The test file I’m working with is

dwcourse November 23, 2011 at 1:57 pm

At the bottom of your SpryMenuBarVertical.css file you’ll find this:

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

It affects only IE. Change the background property to whatever color you need.

nichlee November 23, 2011 at 7:49 pm

Yes of course. Thanks so much.

Cam November 14, 2011 at 7:31 am

Is it possible to use text in place of the menu bar arrows?

dwcourse November 14, 2011 at 8:11 am

The menu bar arrows are CSS background images so, with a bit of work, you can replace them with another image with text in it.

wlopez August 14, 2011 at 1:30 pm

I am new to Dreamweaver…and a client contacted me to see if I could help them updating their website…simple things like changing the font type and size. But now I am trying to make changes to the menu bar, and I am having tons of problems with it. When you go to a page, for instance , the submenu is showing up constantly and I can’t seem to be able to fix it. I tried making a new spry menu in a new file, copy and paste it, but it automatically changes to what’s showing up now.
This is driving me crazy. I have been trying to fix this for days now…with no luck.
Another issue I am having is that all the changes I am making to the website can be seen in IExplorer but not with Fox, Chrome…
Agh! I am desperately in need for some advice here…any help I will greatly appreciate it.



dwcourse August 14, 2011 at 1:53 pm

I’m sorry, but there’s really no kind way to put this. The HTML code and CSS for that page are a mess.

But to answer one of your questions, the reason that building a new menu and pasting it in won’t work is that the look (and some of the functionality) of the menu is governed by the CSS style rules in the SpryMenuBarHorizontal.css file. Nothing you do will have any effect unless you edit the style rules in that file. And, quite frankly, the existing changes to that file have done more damage than good. I’d recommend deleting the menu and the links to the menu CSS and Javascript files and reading these posts before you start to rebuild the menu:

Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver:

The Ten Commandments for Editing Dreamweaver’s Spry Menubars:

But you should be aware that without a working knowledge of HTML and CSS you may be in over your head.

wlopez August 14, 2011 at 2:47 pm

So this page (or pages) are basically ruined?…I was afraid that was going to be the answer…

dwcourse August 14, 2011 at 3:12 pm

I’m not sure I’d say ruined but yes, it would probably be easier to start from scratch but, if the menu is the main item, then you could just delete it and the related files and rebuild that.

Rebecca July 28, 2011 at 6:32 am

I have created a website and the spry menu works but the submenu doesn’t. Please any suggestions on how to fix this would be greatly appreciated. The website is the submenu are located under “Environmental”, “Economic Development” and “Publications” but nothing pops up.


dwcourse July 28, 2011 at 8:31 am

The link to your Javascript file is broken it’s currently file:///C|/Users/gis/Documents/nefcoplanning/SpryAssets/SpryMenuBar.js which points to a file on your hard drive not on the web. It needs to be fixed. The correct link would be /SpryAssets/SpryMenuBar.js

Rebecca July 29, 2011 at 8:12 am

Thanks for the information. Could you tell me how I would correct this problem? Where do I need to make the changes?

Rebecca July 29, 2011 at 9:09 am

never mind we figured it out :)

Ryan May 31, 2011 at 11:11 am

I am working on a horizontal spry menu. Some of the menu items are a single line and other are 2 lines. I would like them to be centered vertically. How can do this?

jcook June 1, 2011 at 4:16 pm

Sadly there’s no straightforward way I know of you accomplish what you want.

Nick April 23, 2011 at 10:36 pm

I’m currently working on a website for a class project(but I plan on finishing it later) and I want to know how or if it is possible to do something. What I would like to do is when your clicking from page to page on my spry menu bar I’d like an image to be displayed over the tab of the page your on. I figured out the rollover image and background image and everything but I would also like to be able to do this. If you know of anyway to do this it’d be much appreciated. Thanks

jcook April 24, 2011 at 7:44 am

Not sure if this is what you’re after.

Highlight the Current Page in a Spry Menu with CSS:

Cathy March 16, 2011 at 3:24 pm

I got frustrated and deleted the spry menu I created and I think all the coding. I tried to recreate it now my submenus won’t show up when I test it in IE. What am I doing wrong?

Dwcourse March 16, 2011 at 3:54 pm

CAn you post your page and give me a link?

Cathy March 15, 2011 at 2:40 pm

I am using Dreamweaver CS3. I created a spry menu bar that I want to scroll to the bottom of the page with me as I scroll. I can’t find any data to show how to do this. Please advise.

jcook March 15, 2011 at 4:47 pm

You need to learn about the position:fixed CSS property which you can apply to the ul.MenuBarHorizontal style rule to accomplish what you want. Check out these pages: (read the text in the content at the top)

Melanie February 3, 2011 at 1:37 pm

I’m having an issue getting my spry vertical menu to stay at the top of the page – it seems to be centering vertically so that it looks fine on a page with little content but not great when there is more content. I thought this would be a position thing, but I haven’t figured out how to fix it. Any thoughts?

jcook February 4, 2011 at 8:19 am

I’m assuming you got the issue figured out because I don’t see it on the site you linked to. If you’re still having the issue, let me know which browser(s) has the issue.

Melanie February 4, 2011 at 10:45 am

Yep just needed a valign in the proper div. Thanks though!

Tamara January 12, 2011 at 8:59 am

I just created a verticle menu bar on my site. Now I get this error message when you load my page with the menu bar.

The page is not connected with script file ActiveContentSliding2.js

Everything works right but everytime you open a page with the menu bar this error pops up.

jcook January 12, 2011 at 9:26 am

That’s not much info to go on. That error message doesn’t appear to be related to a Spry Menubar. So a couple of questions:

Do you get the error when opening the page in Dreamweaver or in a browser? If it’s DW then you’ve probably added and deleted some Spry or other content and you’re being warned about a javascript link that is broken or unnecessary.

Did you use a Spry menubar from Dreamweaver or some other type of menu? And did you use any other “active” content on the page.

Michelle January 5, 2011 at 7:41 am

I’m having a little trouble with the Vertical Spry Menu Bar. It’s currently on the left side of the page, but I’d like to get it to be on the right side of the page. Is this possible?

Also, what if I want to continue with text or pictures on the same line as the Spry Menu Bar? How do I make this happen? Every time I try I either have to be on the next line or under the last menu item.

Thank you for any help!!

jcook January 5, 2011 at 7:54 am

You need to place the spry menubar within a larger layout framework. I’d suggest starting with one of the built-in , multi-column ayouts that come with Dreamweaver

samaire December 10, 2010 at 10:59 am

I have created a website and was using Spry Vertical Menu Bar but i had a graphic i wanted to use and it wouldn’t work. If i had submenus the graphic just wouldn’t show up but so long as i didn’t have submenus the graphics would work, someone help me please!

jcook December 31, 2010 at 10:19 am

The background for items with a submenu is controlled by the ul.MenuBarVertical a.MenuBarItemSubmenu style rule.

Paul November 8, 2010 at 2:15 pm

Thank you in advance for your help. I have setup my vertical Spry Menu and it is working perfectly. I love that option for development. So simple and I am a beginner!

My only problem with it is when I roll my mouse over an item on my menu and submenu, a little box appears (like a bubble text box) beneath my cursor with the link name in it. How can I remove that option from the spry menu?

Paul November 8, 2010 at 2:42 pm

Nevermind! I figured it out. If anyone else ever has this issue, it was simple:

That little box was a “title” box. Once I removed the title from each item (link) in my menubar, that box stopped appearing.

Frank November 1, 2010 at 12:02 am

I’m having trouble with my Spry Menu…it’s probably something simple, but I’m beating my head against the wall.

Everything works fine when I preview the site. Everything works fine if I view it locally. But, once I upload the site, the menu bar on the first page works fine – but the menus on the subsequent pages you link to in the menu do not work. Any ideas?

jcook November 1, 2010 at 8:08 am

You’ve somehow broken the links to the CSS and javascript file on the non-home pages. You have:

It should be:

Looks like you might have set up your site incorrectly. The “../Publish/” shouldn’t be in those links.

Frank November 1, 2010 at 9:49 am

Got it – I knew it was something simple.

Thanks very much for the help – I appreciate it.

Sandy Bernstein October 18, 2010 at 10:14 am

I am working with DW CS4 Spry Menus. I’ve added links for all of my menus/submenus, but when viewing the website, using F12, the first link will work, but when I click another menu item on the Spry menu, the page won’t change. It stays on the original linked page. Is this because I am not working on a webserver, just a folder on our school server? Is there a way to get around this?


jcook October 29, 2010 at 8:21 am

I you are previewing in a browser, your links should work. However when you click on your first link, you’re taking to another page and you’re no longer previewing from Dreamweaver. So depending upon how you created your links (if they are relative to the site root for instance) they may not work on subsequent pages. Try setting links relative to the document when you set up your site.

Kathrine October 4, 2010 at 11:15 am

I was wondering how to position the spry menu bar on the page. Currently mine is positioned vertically on the bottom and I need to bring it up to the top.

jcook October 5, 2010 at 2:43 pm

It’s impossible to answer that without seeing the page. GEnerally it’s just a matter of positioning it properly within the structure of your page.

Red Rojo September 4, 2010 at 11:36 am

Anyone have suggestions how to set up a horizontal spry menu that has the following requirements:

1) The menu is centered and a fixed width, 800 px
2) The menu needs to sit against a colored background who’s width is 100% of the browser window and who’s height needs to be the same as the menu bar
3) The colored background needs to stretch vertically as a user resizes the text

Thanks for any help you can give.

jcook September 4, 2010 at 12:16 pm

Thre are a couple ways to do it here’s one:

Put the menu in a div 800px wide and center that div (margin-left:auto and margin-right:auto) within another div (width:100% with the colored background).

You’ll also need a clearing element

SonicGeekette July 2, 2010 at 11:10 am

Thanks so much for all of your tips! I’ve been searching for hours for the last couple of days for an IE fix for the top menu bar. I found one that almost did the trick but still had some bugs in it. Your hint about setting the width to a set px in ul.MenuBarVertical and ul.MenuBarVertical li ONLY was the fix I was working for. (Yatahhhh!)

Dan June 24, 2010 at 10:58 am


I’m in the process of building my website. I successfully created a spry horizontal menu bar. However, after messing around with some of the css properties, saving the html so i could view it in fox, I’ve got some issues. When i try to create a new hor. menu bar for another html, it brings up the old saved version, which 1) aligns my menu bar vertically instead of horizontally 2) the even number items in my submenu are aligned next to the previous item instead of below it.

Should I try to reset all properties? if so, how? or should I try to fix each problem at a time?

jcook June 24, 2010 at 11:59 am

Hard to comment without a link to the site but…

To “reset” the style sheet, define a new site, make a page, add a menu and save the style sheet. You can then use the new style sheet to replace your existing one. BTW, it’s a good idea to keep a “virgin” copy of the style sheet around for whenever you need to do a reset (it’s usually easier to start from scratch that fix a heavily edited style sheet).

Dan June 24, 2010 at 1:45 pm

Awesome. Thank so much for the help.

mbroder1 June 10, 2010 at 3:15 pm

is there a css setting for the spry menus that controls the visited link state?

jcook June 10, 2010 at 3:36 pm

You’d have to add it: ul.MenuBarVertical a:visited

Make sure you put it below the ul.MenuBarVertical a rule in the style sheet.

Aaron June 3, 2010 at 6:03 pm

Hi, is there a way to have all of the submenus align with the top of the main menu? or vertically centered with the main menu? (instead of it lining up with its respective menu item)

jcook June 10, 2010 at 3:51 pm

I haven’t done this but you could try absolutely positioning the submenus (ul.MenuBarHorizontal ul) absolutely with respect to the main menu (ul.MenuBarHorizontal). You’d also need to apply the position: relative property to the ul.MenuBarHorizontal style rule. If you have sub-submenus you’ll need to create a new rule ul.MenuBarHorizontal ul ul for positioning them.

Diwakar June 1, 2010 at 10:51 am

Is there any way that we can give a menu item currently in use a different color, so that user knows which tab is being used currently. I tried using the following :
ul.MenuBarVertical a:visited
background-color: #33C;
color: #333;

but it puts all the items once visited in a different color, while i want only that item of the spry menu bar to be highlighted which is currently in use.

jcook June 10, 2010 at 4:16 pm

You can create a style for the current link (say a class rule name .current) and then apply it to the relevant link on a page by page basis.

Mike June 11, 2010 at 4:47 pm

I’m trying to do the same thing, but with a virtual header insert. I tried giving each page a separate body id name, but I haven’t been successful. Is it possible to have the current page highlighted in a virtual header?

jcook June 24, 2010 at 11:47 am

If your pages are based upon a template you’ll have to use the menu: Modify>Templates>Make Attributes Editable… command to make the ID attribute of the body tag editable and then edit the ID using the menu: Modify>Template Properties command.

Sam April 27, 2010 at 8:01 pm

Hi there,

I was wondering how you create translucent/semi-transparent drop-down menus, any help is always appreciated!


jcook April 27, 2010 at 11:16 pm

You could use a png image with transparency for your link background but transparency in png images isn’t supported in IE6 (not a big deal to me but…)

The simplest thing to do is just fake it with background-images for the links that give you the appearance of transparency.

Sam April 28, 2010 at 8:45 am

Thanks for the reply Jim, much appreciated.

Yeah I thought that might be the case – using actual images for the drop-down menu. Would you be able to point me in the right direction as to how to go about this the most effective way?

Below is a link to a jpeg of what I hope to create, or something along these lines – that is, a faded (50%) drop-down menu that allows the user to highlight a faded submenu (75%) – I know this is achievable, but what is the best way?


jcook April 28, 2010 at 8:52 am

Well for that you need true transparency and it can be done with CSS3 (the opacity property) and an IE workaround (the filter property).

.transparency {
/* for IE */
/* CSS3 standard */

That won’t work of IE6 however. Hre’s more info:

Kelli April 21, 2010 at 9:14 pm

I realize this is an older post, but I do need some help!

Is it possible to have only ONE menu open at a time?
I’ve tried a div code (manually inserted) and for some reason, it’s not working… Any ideas?

Jim Cook April 21, 2010 at 9:26 pm

I’d love to help but I really don’t have a clue what you mean by only having one menu open at a time. Can you point me to an example and possible post your attempt and give me a url?

Taresah Youngman April 20, 2010 at 11:06 am

Hi, I have two issues. Firstly, I have lost my arrows on the menu items that open to submenus. I assume it is a css problem, but I don’t know what I did to cause this. Also, on,
I can’t get the widget to look the same as the other pages (especially in IE). I’m thinking that it has something to do with the “wrapper” that is with the gallery that I made in Adobe Bridge and put on the page. Can you help me?

jcook April 21, 2010 at 8:49 am

1. You’ve removed the background graphic in the style rule ul.MenuBarVertical a.MenuBarItemSubmenu.

2. The width of the div holding the menu is smaller on that page than on the others (102px versus 129px).

BTW, creating your page layouts with AP (Absolutely Positioned) divs or exporting it from a program like Photoshop or Fireworks is going to cause you lots of problems like this in the long run.

Taresah Youngman April 21, 2010 at 12:55 pm

Thank you for your help!
1. Under ul.MenuBarVertical a.MenuBarItemSubmenu, I replaced the background-image with url(SpryMenuBarRight.gif)( I had accidently put transparent in there). In Dreamweaver it looks fine, in the browsers it creates a repeated pattern of arrows across the whole field of the Menu Bar menu rectangle. I also have background-repeat, no-repeat set.
2. The width of the div seemed to solve that problem.

(I didn’t export the layout from any other program. I did use a Photoshop jpeg for the background image. I’ll explore the AP divs)

Do you have any suggestions for solving problem #1?

Thank you,

jcook April 21, 2010 at 2:00 pm

her’s the full set of properties for that rule:

background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;

If you deleted the position or repeat property that could cause an issue with how it displays.

Taresah Youngman April 21, 2010 at 3:15 pm

Thanks for your help. It is finally working.

Mary April 7, 2010 at 11:07 am

I am having a problem with the spry menu bar vertical in firefox and safari. The submenu are not displaying correctly. I can preview everything fine in IE.

Thanks Mary

jcook April 8, 2010 at 9:11 am

I can’t diagnose the issue without a link.

Ben March 16, 2010 at 5:21 pm


First, the website is a compressed file. Once downloaded, go into the “html” folder and click any of the pages. I apologize for having to do it this way but the site is not up yet.

The site is working great on everything but IE v 6.0

The animation bar is very slow, and the spry menu bar is dropping out when rolled over. I am really hoping I don’t have to make any drastic changes, but please let me know what you think.

Thank you very much this is an awesome forum you are doing!

jcook March 16, 2010 at 6:16 pm

You’ve made a number of changes to your styles and it’s hard to tell which ones would affect the display but you might try checking these:

In the ul.MenuBarHorizontal ul the zindex is originally set to 1020, I’d reset it to that value.

You removed the position: absolute from the ul.MenuBarHorizontal ul ul rule. Try putting it back.

I’d restore the setting for ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible to left: auto; and top: 0;

If that doesn’t do it I’d start with a fresh style sheet and make my edits very methodically based upon the suggestions in this article.

Ben March 18, 2010 at 6:13 pm


The suggestions you gave me made a little progress. The links are all now working, and the menu bar is not dropping out!

However the pages are still very laggy, and only on IE 6.0

Do you have any idea what might be the cause of this?

Thank you very much for looking over the files, you run an awsome forum and your efforts are much appreciated.


Eduardo Moradel March 9, 2010 at 2:46 pm

I´m having truoble with my sry menu, looks perfect on firefox and safari but the submenu and submenu are moved all the way to the right on Internet Expore how can i fix it.

jcook March 12, 2010 at 10:16 pm

This is usually a matter of you having changed the position property in one of your CSS rules. Of course it’s hard to say without actually seeing your page. Can you post a link?

John March 6, 2010 at 8:51 pm

im having a problem with the spry menu. it looks fine in fire fox, but when i look at it in safari the buttons are too big and my last button goes onto the next line. how do i make it look the same in both browsers?

jcook March 6, 2010 at 9:16 pm

Looks like you’ve got the type size set higher in Safari. You can reset it to normal by choosing Menu: View>Actual Size in Safari.

But the reason it’s a problem is that you’ve set the width of your list items using ems: width:7.14em;

and the width of your “wrapper” div in pixels: width:600px;

When someone increases the type size in their browser that increases the actual size of an em increases but pixels remain constant. Suddenly the list items are too big to fit in your wrapper.

Since you have 6 menu items I’d and your wrapper is 600 px, I’d recommend you set the width in the ul.MenuBarHorizontal li style rule to 100px.

Jullie Jones February 28, 2010 at 2:07 am

Hi, my name is Jullie and i created a website called Hills Kids just over a year ago.
Currently its difficult to navigate around my website. I thought of using a Spry Menu to help.
I used an existing page and Saved As the page with a new name. I then created the Spry Menu with all the Sub Menu and links.
How do i link my Spry Menu so that it appears on all my pages, so i only need to make changes in one location? I currently use a CSS file to maintain the current format of my pages, each page has a <link href="hillskids.css" . I've tried to do the same with the Spry Menu by copying and pasting the following information into an existing page below my existing link href, but it does not display.

Is there an answer to what i’m trying to do? Do you have a course on how to do this?

Thank you

jcook February 28, 2010 at 9:22 am

Julie, that’s a more complex question than you might imagine.

1. First Spry Menubars use CSS and Javascript that are (generally) saved in external files and linked automatically similar to what you show. You have to make sure you keep and upload those dependent files as well. BTW, the way you change the look of the menubar is to edit the CSS style sheet. Never edit the javascript (unless you’re an expert).

2. Second, there are a couple ways to add the menubar to all pages and only update it in one.

a. Create a Dreamweaver template for your pages and then build all the pages based upon the template. Just make sure than you don’t place the menu in an editable region.

b. Place the HTML for the template in an external “include” file and then place the menu file in the page using either a server-side include or php-include. Either method requires that the server be configured to handle the request and may require than you use a special file extension (fro example .shtml or .php instead of .html).

Jeremy February 23, 2010 at 5:33 pm

I made a spry menu, and I want that grey background on all Menu’s. I have no idea what I am doing and this is where I am now. How do I get ride of those two white boxes on troubleshooting tip and services. These two are the only two with drop down menus right now. I don’t want to do the others until this is fixed. When I load it live it gives me that Active X and as soon as allow it those two turn white. I allowed Active X to run on my files and now it just goes straight to white. I know it is a simple fix, but been working on it for a few hours now with no progress any help would be much appreciated. Thank you again

jcook February 23, 2010 at 5:55 pm

Actually it’s not so simple. You have a number of Explorer related issues that need sorted out. I’d probably recommend starting the menu over or at least returning to the default SpryAssets/SpryMenuBarHorizontal.css style sheet and then following the steps in this tutorial. With Spry menubars, it’s best not to edit a style unless you have a good idea of what it does.

Jeremy February 23, 2010 at 8:21 pm

Alright I did as you said and the same thing happened, it went white. My way, and your way is making the same thing happen.

jcook February 23, 2010 at 9:23 pm

One possible issue, you’re using CS3 (it appears) which uses Spry 1.4, you should upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found at

Sorry, but other than that all I can recommend is starting with the default styles and change one style property at a time, test after each change and see where the problem lies.

Jeremy M February 22, 2010 at 9:50 am

This may already be answered but my submenus arent popping out and I have tried to get them to work over and over again but nothing seems to work. Please help me. Here’s the link to the site:

jcook February 22, 2010 at 10:38 am

Jeremy, some of your files are referenced incorrectly:

" type="text/javascript">

Those are actually pointing to files on your local computer which, of course, aren’t available online. You need to fix any links that begin with “file:///”

It could be you didn’t define your site correctly or some other issue. In any case the links should probably look like this:

phs/SpryMenuBar.js or this: /phs/SpryMenuBar.js

Jeremy M February 24, 2010 at 9:53 am

Thanks so much for your help! I’ll be sure to get back with you if I run into anymore problems.

Sara February 19, 2010 at 10:11 am


Your tutorial was very useful. I also was trying to follow how to fix the width of my menu bar. (ul.MenuHorizontal li) no matter which option I use, (em/px/pt, etc) I could not get exactly 100% across the width of the banner/body of my site. I would still either 3 pixels too short or way over (push the last menu page to the second row.)

Has anyone had this problem?

jcook February 19, 2010 at 10:28 am

I’d have to see the page to give you an answer.

Sara February 19, 2010 at 10:54 am

wow, thanks for the quick reply!
here is my test link:

Thanks for looking into this for me.

jcook February 19, 2010 at 11:13 am

That’s going to be a problem for you. You layout is 1000 pixels wide and that doesn’t divide by six (the number of top level menu items) evenly. The easiest solution would be to give the table cell holding the menu a background that matches the menu so those few extra pixels won’t stand out so bad.

Another solution is to create a custom style class rule for one of the menu items and make it wider to use up those extra pixels. then apply the style to one of your menu items.

Sara February 19, 2010 at 11:19 am

I see I see. I will try that.
Thanks again!

Sara February 19, 2010 at 11:43 am

hmmm. i just thought i would try to add a bg img for a quick fix. thanks again for your help :]

jcook February 19, 2010 at 11:55 am

It looks good to me! Glad I could help.

Bling_bill February 14, 2010 at 8:37 pm

Great tutorial!!
I am having problems viewing my menu bar in IE- the dropdowns appear along the top of the screen instead of under the rollover. However it is working fine in chrome and firefox. Do you have any idea what the problem could be?
I hve put it up online at
Thanks in advance for any suggestions!

jcook February 19, 2010 at 8:26 am

After a quick look, I’d guess that you added the property display:inline; to the ul.MenuBarHorizontal ul ul and ul.MenuBarHorizontal ul a.MenuBarItemSubmenu style rules. I’d try deleting the display properties in those style rules

Sharon J. February 10, 2010 at 2:49 pm

Hi – great tutorial! But when I view my page the submenus do not come out (I tried in Safari and Firefox). Any suggestions on the problem?

By the way – here’s a link to the website with the menu:

jcook February 19, 2010 at 8:17 am

Sorry to be slow to respond. I’ve been working to get the next session of my Dominate Dreamweaver (see ad in right sidebar) ready. BTW, it covers Spry Menubars.

Anyway here are two potential problems I see:

In the ul.MenuBarVertical li style rule you’ve changed the position property to inherit, try position:relative.
In the ul.MenuBarVertical ul li rule it looks like you’ve added float:none. I’d try deleting that property.

Hope that helps.

Rob February 10, 2010 at 12:12 pm


Is there any way I can make a spry panel reveal upwards instead of downwards? I want a panel at the bottom of my site which grows upwards to cover the rest of the site… I have done something similar in flash but need to create a similar look in html:

Thanks for your help…

jcook February 10, 2010 at 12:37 pm

I haven’t tested this but in the ul.MenuBarHorizontal ul style rule try setting the bottom property (under positioning) to equal the height of your menu “buttons”

Jeremy M February 9, 2010 at 9:52 am

The arrows for the drop down menus arent showing up on the spry menu bar. Can someone help me? please (I havent really worked with spry menus before)

jcook February 9, 2010 at 10:21 am

It’s hard to answer without being able to view your page but there are a few possibiilties:

You didn’t upload the arrow graphics
You’ve changed the button background color and it now matches the arrow color
You deleted or created a conflicting style that overrides the style for links with submenus (or insterted a background image which is replacing the arrow image).

As I said, if you can post a link, I can probably answer this one pretty quickly for you.

Gerard February 3, 2010 at 5:44 pm

I would like to have the sub menu opening under the menu in vertical spry instead of the right side, how do I do that?
Thank you so much.

jcook February 3, 2010 at 5:54 pm

Doing that would open the submenus on top of the main menu items that appear below them which causes real problems for the user. If you mean an “accordion” type menu, you can’t do that with the spry menubars built-in into Dreamweaver. If you’re comfortable with a little coding, you might try searching for “accordion menu jquery”

Michael January 28, 2010 at 12:06 pm

I have a horizontal menu bar with drop down menus. In Firefox (and I am sure Safari) there is no problem with the drop down menus. The left alignment of the drop down is in line with the left alignment of the menu item above it on the menu bar. In IE7, the left alignment of the drop down is about the center of the menu item above it.

I have seen that there was a conflict in IE7 with Spry and div tags. I was able to remove some and that actually fixed my menu from “dropping up” but not the above problem. Any suggestions?

jcook February 3, 2010 at 1:26 pm

I don’t know of any conflict with IE7 and Spry. I’d need to see the page to offer suggestions.

Michael February 4, 2010 at 11:42 am
McGurk January 27, 2010 at 11:58 am

Vertical menu works fine in FF, Opera, and IE8 but main menu disappears (part or all of it) in IE7 when hovering over it and after move out of hover it does not always reappear. Any ideas? I have reviewed the all classes in css that this references. link to test page:

McGurk January 27, 2010 at 2:45 pm

I found a strange solution but it works. I switched to a horizontal menu and made adjustments in the CSS so it works as a vertical menu but without the problem that the horizontal menu has with IE7. Now, IE8 does not like it but at least I know how to take care of that issue. Add a meta tag below the head tag with the following between the brackets: meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″

A lot of messing around but at least I can get it on our web.

atraweek January 7, 2010 at 10:40 am

First of all, thank you for all your help. This article achieved what five others couldn’t. It’s been bookmarked and passed on to others.

Now I’m wrestling with Internet Explorer. The custom skin looks great on Firefox and Safari, but falls apart like a stood-up prom date on IE7. I think I can actually see it sobbing.

The plan is to dink around with the CSS to see what exactly is causing it, but if you guys could take a look and maybe give me some pointers, that’d be awesome.

jcook January 7, 2010 at 10:56 am

Try setting the widths in these style rules to a pixel width rather than auto:

ul.MenuBarVertical ul
ul.MenuBarVertical ul li

atraweek January 7, 2010 at 6:26 pm

Didn’t work. Hm.

jcook January 7, 2010 at 6:44 pm

You know, once I’ve got what the menu should look like and all the pieces, if I run into a problem it’s sometimes easier start over with the default style sheet and very systematically update the styles being careful not to mess with any of the display, position or float properties and making sure all the styling is done in the DESIGN INFORMATION section of the style sheet (basically all the various link-related tags).

atraweek January 6, 2010 at 2:03 pm

How do I keep the background image set for the main menu from displaying in the submenus? It seems like both sets of buttons pull from the same class.

jcook January 6, 2010 at 2:51 pm

you need to add special style rules for the sub-menus after the regular rules. For instance:

ul.MenuBarVertical a

applies to all of the menu items. To overwrite it for submenus only you need to add this rule:

ul.MenuBarVertical ul a

The second “ul” forces it to apply only to submenus.

Rachel October 5, 2010 at 8:07 pm

thank you for this, I have redone my menu 3 times and I still couldn’t figure out how to fix it. I tried giving it a class but that didn’t work, but this has

jcook October 5, 2010 at 8:21 pm

I’m glad it worked for you. It’s nice to get good feedback!

blake watson December 25, 2009 at 7:13 am

could you tell me, why when i change a style on my menu bar it changes in dreamweaver but when i save and preview in my safari it dousent show any changes? … but it does in my opera browser?

please help?

jcook December 30, 2009 at 7:23 am

One guess is that you are viewing a cached version in Safari. Try refreshing the browser.

Jimbo December 22, 2009 at 2:09 pm

Hey guys Need a little help, I made my spry menu, everything works perfectly except the drop downs with many items in them, instead of scrolling they just fall off the page and you have to click down the side of the web page to see them all, is there a way to shorten the list and have them automatically scroll

jcook December 30, 2009 at 7:25 am

They won’t scroll automatically. To shorten the list you could reduce the font size and padding in the submenus.

Chris December 9, 2009 at 3:18 pm

Hey there, just a question regarding horizontal spry menu bars.

I have 2 pages, I want a white menu bar on one page and a black menu bar on the other. when i set settings for the menu bar, it applies it to both pages in my site. How can i create a separate set of styles for a different menu bar?


jcook December 9, 2009 at 3:22 pm

Assuming that both menus are the same and all you want to do is change the color, you can simply create style rules in one of the documents to overrule the background-color properties in the same styles in the external style sheet

Debbe November 22, 2009 at 12:16 am

Hi, I am working on my 2nd website and it’s my 1st time using Spry. I have 2 horizontal menu bars (one on top of the scree and one on bottom). I have 2 questions:

1) How can I get the submenus on the bottom menu to extend out the top of the menu instead of the bottom? I have read some advice on both this forum and others but can’t quite seem to get it.

2) Sometimes my submenus work and sometimes they don’t. I am trying to test some advice I’ve received for my 1st question but I can’t since they don’t seem to always pop up. They were working fine and I changed something else, not having to do w/ the menus at all, and when I previewed in my browser they suddenly didn’t work. When I load my code to the server, the submens are intermittent. I use Firefox and have not tested in any other browser yet since I can’t get it to work 100% in mine.

I can provide code if necessary. thanks!

jcook November 23, 2009 at 5:19 pm

If you can provide a link where I can view the page, I might be able to help.

Wade November 3, 2009 at 12:28 pm

Thank you very much for looking at this, here is a temporary URL

Last Post:
Wade November 2, 2009 at 10:53 pm

Thank you in advance for considering to help. I added a Horizontal Spry menu in Dreamweaver but get a white box with false covering my submenues in IE. It works fine in FF.

Thank You Again


jcook November 3, 2009 at 7:08 am

I might be able to help if you can post a link to your site.

jcook November 4, 2009 at 8:02 am

It might be because you have an empty class attribut in your submenus:

    Try removing that and see if it helps.

Wade November 5, 2009 at 12:00 am

Thank you for responding. Any chance of sharing what that code looks like (I am a rookie)?


jcook November 5, 2009 at 8:07 am

I don’t see it now so maybe I was looking at something else. I would have looked like:


  • You might just need to try replacing the menubar .js and .css files (probably) in your Spry Assets folder and restyling the menu again. Make sure not to edit the .js file.

Wade November 2, 2009 at 10:53 pm

Thank you in advance for considering to help. I added a Horizontal Spry menu in Dreamweaver but get a white box with false covering my submenues in IE. It works fine in FF.

Thank You Again

jcook November 3, 2009 at 7:08 am

I might be able to help if you can post a link to your site.

Wade November 3, 2009 at 10:48 pm

Thank you very much for looking at this, here is a temporary URL

Dizzy October 16, 2009 at 9:35 am


I don’t know if I am doing this the right way, I am a newbie to designing with CSS so am trying to get my head around it as I go along.

I have a sprymenu as my main navbar on my site. It’s saved in a separate html file and then placed as a server side include on each of my shtml pages. The nav works fine so far. What I would like to do is have each page menu item change colour when you are on that page? I’ve worked out how give each menu item an id, and the body of each page an id, but how do I tell it to process this, and is this the best way to do this? Searching the web isn’t getting me far so am suspicious I may be doing this the wrong way.

Many thanks for any help

jcook October 18, 2009 at 6:55 pm

Say you have pages home.html, contact.html, etc. Give the body of you pages unique ids like “home”, “contact” etc.

You’ll also need to create a style for all your links something like this:

#home a.home, #contact {insert properties}

Then assign the style class .home to the home link in your menu. Apply the style class rule .contact to the contact link in your menu. Etc.

You may need to add additional info (the name of the menu etc.) to the actual style declaration and you may want to define a hove

Leah October 11, 2009 at 5:58 pm

Hey there,
How would you customize a Spry Menu Bar to show a picture as the rollover instead of the normal “plain boxed look”.
Can this even be done using a Spry Menu? Any help would be appreciated.
Thank you!
~ Leah

jcook October 15, 2009 at 2:29 pm

You’d need to insert the image as a background-image in the link-related style rules and the hover image as the background-image for the various hover states of the links.

TROY October 9, 2009 at 2:38 pm

Complete Nubie here and I’m sure with a dumb question but here goes:

1. How do you freeze the menu bar so that it always stays in the same position as you scroll up or down the page?

2. Why does my entire menu bar move to the left when it is moused over?

Thanks in advance for your time…


jcook October 9, 2009 at 3:05 pm

1. To “freeze” the menu add position: fixed; to the ul.MenuBarVertical style rule. Depending upon your layout this might cause other issues.

2. You’ve changed the width in the ul.MenuBarVertical style rule from a fixed width in pixels to “auto.” That might be the issue.

TROY October 10, 2009 at 9:56 am

your the man

Laura October 6, 2009 at 5:09 am

Hi, I’m making an collapsible menu and have pretty much got what i want it to do, but in my browser (safari) it’s showing a blue outline round the title when selected. How do i take this off? Also, how do i make its default to be closed rather that expanded?
If you could help me out it’d be brilliant!
the url is

jcook October 8, 2009 at 8:35 am

You’re using Spry collapsible panels for your menu. I’m afraid this article won’t be any help for that.

Susan October 2, 2009 at 3:00 pm

Let’s say you are on the Contact Us page. Is there a way for the words “Contact Us” to appear in the Hover color while all the rest of the nav bar is in the Link state color? It is easy to do with the old rollover-image way of creating a nav bar (just substitute the over image on that page), but I can’t figure out how to make this occur with the Spry Menus. For small websites, I hate doing bread crumbs.

jcook October 3, 2009 at 3:20 pm

The simplest thing to do is to create a new style (say .currentPage) with the properties you want and then apply it to the appropriate menu item on a page by page basis.

Anki September 17, 2009 at 4:48 pm


I’ve done a spry menu bar vertical, and I would like the fontsize to be smaller in the submenu than in the menu – how do I fix that?

jcook September 17, 2009 at 5:11 pm

In the style ul.MenuBarVertical ul set a font-size for your submenus

brooke September 13, 2009 at 6:00 pm

this article has been a HUGE help! I’m only stuck on two things now though (after wrestling with this for awhile)…

When I make this menu, I want the 4 different categories to be different colors. Thus, I’ve included a “span” inside the li and then another span inside the ul, which I know isn’t “proper” css. But I’m not sure how else to do it. Is there a correct way to do this?

-When in Internet Explorer (8, in this case), the photography mouse-over has weird borders and a scroll thingy on it. But none of the others do. The rest of the menu is correct except for that one. You can see what I mean here… (should look likedoes look like in IE8)

Any insight? I’d be extremely grateful!! Thank you!


jcook September 14, 2009 at 4:37 pm

you shouldn’ t need the spans. you could just make a custom style classes and apply it to the links themselves.

Also, it’s hard to know without seeing the code but it looks like you gave the main ul and set height and then exceeded that (probably with margin or padding) somewhere. Anyway I think it’s a height setting somewhere. You’re better off letting the height happen on it’s own as a result of font size and padding rather than trying to “force” it.

Thomas Dion September 5, 2009 at 9:18 pm

how do you creat a spry menu that is transparent without the “false” showing up!?


jcook September 8, 2009 at 5:21 am

What “false” are you talking about? If you remove the background property from all the style rules, the menu should be transparent.

Steve September 2, 2009 at 7:52 pm

Ok so i decided to start from scratch as i think i had modified that code from ages ago too much and its best that i start again.

what i have now is this

now when in IE and want a transparent submenu i seem to get this problem. (white box that says false) this does happen in firefox.

do you have a solution for this.

my solution is to edit out this part of teh code in the js file.

Comment: Commented out to remove the iFrame. It causes problems in IE. This function is not called in Firefox so just made them act the same.

var layer = document.createElement(‘iframe’);
layer.tabIndex = ‘-1’;
layer.src = ‘javascript:false;’;
menu.parentNode.appendChild(layer); = menu.offsetLeft + ‘px’; = menu.offsetTop + ‘px’; = menu.offsetWidth + ‘px’; = menu.offsetHeight + ‘px’;

Steve September 2, 2009 at 8:07 pm

my next problem is setting the submenu width. if i use auto items align left to right instead of top to bottom. this happens in IE only. i have to use a fixed width for it to be top to bottom however i have my parents set to auto so would like teh submenus to take on the same size.

ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 100px;
position: absolute;
left: -1000em;

Steve September 2, 2009 at 9:05 pm

i have found that if i set the width of the following property to 100% it fixes this the submenus from aligning left to right to top to bottom in IE.
ul.MenuBarHorizontal ul li
float: none;
background-color: transparent;
width: 100%;
however in doing this each submenu item gets rather wide in IE only. it seems it is ignoring or wrongly interperating the 100% width in ul.MenuBarHorizontal ul. if i set a fixed width it is correct but i want it to be the same width as its parent (which vary)

any ideas?

latest progress is uploaded. im really stuck now on the above.

Steve September 2, 2009 at 5:33 pm


i want to place a menu bar at the bottom of the page and have the submenus come out the top of the menu.

i have tried modifying the margin as you have suggested before but this orders the menu wrong and while it will place them above the menu it doesnt have subitem 1 at the bottom and say sub item 3 up the top. which means if not all menu has the same number of items the layout looks strange.

can you help if you understand what i mean. i want it to span out from teh bottom not just be place above.

jcook September 2, 2009 at 5:39 pm

Do you have a url where I can take a look?

Steve September 2, 2009 at 7:16 pm


the venue details and accomodation menu. they only are on this page for testing

while your at it is there a way in wich i can have the width of submenus equal to the width of there parent? they behaive different at the moment in IE and Firefox for me. and currently cut off the right border in both.

Steve September 2, 2009 at 7:19 pm

also if i set this width to auto. teh submenus align horizontally instead of vertically.

ul.MenuBarHorizontal ul li
background-color: #484848;
overflow: hidden;
width: auto;
margin: 0px 0px 5px 0px;
padding: 0px 0px;
border: solid #CCCCCC 1px;

jcook September 2, 2009 at 7:23 pm

OK, that’s an interesting issue I need to look into further. I will say that the easiest solution for the submenu ordering is just to reorder them in the code rather than trying to force them to reorder.

Kind of swamped at the moment but I’ll let you know if I come up with a solution to the bigger issue of alignment.

Steve September 2, 2009 at 7:28 pm

The problem with re-aligning them in the code is that it doesnt work if i have 6 items in one submenu and only 2 in another as one menu will be very detached above the parent or the longe menu will overlap its parent.

AmandaT August 30, 2009 at 9:01 pm

Hi, I am editing a vertical menu bar but can’t seem to find the right way to make the main menu and sub menu appear without overlapping.

Thanks for any suggestions!

jcook August 31, 2009 at 11:22 am


There other issues with your page that make it hard to sort out the menu problem. Most dramatically, you have four closing head tags and opening body tags. It appears some sections of your code have gotten duplicated somehow.

Arte July 19, 2009 at 4:43 pm

Hi JC,

I used CS4 to create a vertical menu and worked hours on the CSS to custumize it the way I wanted. It looks allright now in FF but it is’n showing in IE at all?
I ‘ve allready tried the suggestions you gave in other comments, but they won’t work. I am desperate.
Do you have any idea what it could be?
This is the test url:


jcook July 19, 2009 at 6:27 pm

Tough to know for sure but I don’t think the issue isn’t your Spry Menu but more likely the page structure (either #nav or one of the divs that contains it).

It could be things are too wide for the #header and are being forced down the page where they aren’t visible because of the height limitation on #header. (Just a wild guess)

Arte July 21, 2009 at 2:03 am

Hi JC,
Thanks for your help!
I tried putting the height on auto, but still nothing.
Now I changed the body bg to black (menu font is white) an removed the header and content images to see if the menu might be hidden behind one of them. Now it should be visible somewhere on the site.
But in IE the menu is stays invisible.
It’s really weird. The menu is clearly shown in the code.
Is there some code IE just don’t like? FF still shows everything..
Could you just take another peek, maybe you have any idea?

Arte July 21, 2009 at 2:18 am

Hi JC,
I just made another test : where I removed the line.
Now the menu is showing in IE, but obviously not working..
So I guess there’s an IE-conflict with something in the spry.js which FF doesn’t care about? Gosh, this gets just too complicated..

Arte July 22, 2009 at 4:37 pm

It finally works! Don’t ask me why.. I just built the whole menu again, step by step checking both browsers..
Thanks, Arte

Kevin July 18, 2009 at 3:29 pm

I’m trying to set up a web page with two different vertical spry menus on it. I want one going down the left side of the screen and one going down the right and so that both sub menus open up towards the center of the screen. I was able to get the left side one set but when I inserted the one on the right it seems to be linked with the left so when I make adjustments the left side menu also changes. How do I apply two different vertical spry menus one the same page one on each side of the page with the sub menus open up in towards the middle of the page?

jcook July 19, 2009 at 6:30 pm
Westhoff July 10, 2009 at 9:36 am

Thank you for the great tutorial. I have created a vertical menu and have been having a heck of a time getting text to line up to the right of it. I have been playing around with CSS and finally got text to the right of the menu but it’s way far to the right. Any pointers in the right direction would be greatly appreciated.

jcook July 10, 2009 at 10:04 am

What you want to do can be handled in the ul.MenuBarVertical a style. Add the property text-align: right; to the style to align the text to the right side of the menu.

Then adjust the right padding to move the text away from the border. By default (I believe) the padding setting for ul.MenuBarVertical a is padding: 0.5em 0.75em; (if only two values are given the first is for top and bottom padding, the second for right and left padding). Change it to something like this:

padding: 0.5em 0.75em 0.5em 0.75em;

Now, t four values represent (in order) top, right, bottom and left padding. So adjust the second value to adjust the space between your right aligned text and the right border of the menu.

kerri July 7, 2009 at 1:25 pm

Hi JC,
I would really appreciate some help, I’m doing a site for a friend, and for the first time used a vertical Spry Menu Bar. Everything looks great except in Firefox where the submenu’s stack on top of one another. Here is the site address,
Explorer reads the submenu’s just fine, but firefox will not, I’ve tried so many things to fix this. Any help will be very much appreciated!

jcook July 7, 2009 at 1:57 pm

You’ve added a positioned: fixed property to the ul.MenuBarVertical ul li style. Try removing it and see if that solves the problem.

kerri July 7, 2009 at 2:13 pm

It worked perfectly, I can’t believe the submenu is now working on explorer and firefox, thank you so much!!!

Nan June 25, 2009 at 3:41 pm

Hi, JC, do you know how to have different widthes of each tab on the top level menu bar instead of all share equal size?? Thanks again for the tip. Peace~

Nan June 23, 2009 at 3:16 pm

Hey JC, I am working on a web page which has a horizontal menu bar, I am using dreamweaver CS3 spry menu bar and I made some changes at the css file, but the result looks differently between firefox(3.0.11) and IE8, but they all not wrong, I just needs a simple two level navigation, could you help me? Here is the link for the page:
please help me and I need to get this thing done asap, feel free to email me if you need anyother info, thanks again

jcook June 23, 2009 at 3:51 pm

The immediate problem I see is that you’ve changed the positioning in the ul.MenuBarHorizontal li style from relative to absolute. Change it back and see where that leaves you.

Nan June 24, 2009 at 2:05 pm

Thanks JC, that tip helps me to regain the function of drop down submenu instead of having everything up there, however on the version of firefox(3.0.11), they still overlap on one another, can I just send you my SpryMenuBarHorizontal.css file so you can help me directly because I believe that there are so many properties that I changed to cause such mess, you can gain the file from here:, and open it by DW CS3, and send the fixed file to my email at [email removed], thanks in advance.

jcook June 24, 2009 at 2:17 pm

Sorry Nan, I answer questions when I can but I don’t just fix people’s files and send them off (unless they pay my exorbitant hourly rate). It’s supposed to be a learning process for you.

Paul Marshall June 15, 2009 at 8:10 am

Very good tutorial. Hope you can advise – How do I give a simple one column, multiple row vertical spry menu a top title box (not clickable) of different colour and bolder text to the menu choices beneath but same height and width?

jcook June 17, 2009 at 9:01 am

Add your title at the top of the menu and delete the link but leave the text.

Next make a new style: ul.MenuBarVertical .title and, to start with, give it the same properties as the ul.MenuBarVertical a style (you won’t need the cursor and text-decoration styles)

Select ALL the text of your title and apply the ul.MenuBarVertical .title style to it.

Edit the ul.MenuBarVertical .title as needed.

Paul Marshall June 22, 2009 at 4:53 pm

Hi James, Thank you for the advice. That solved the problem of adding a title element to the vertical menu bar.

But two other problems have cropped up – I have 3 vertical menu bars (for different categories of links). Each menu is positioned below the one above. Problem 1: I want to leave a space between the different category menus, so I added CSS style “margin-bottom: 20px” on the main menu container “ul.MenuBarVertical”. This has desired effect in DW Design View, but no effect in LiveView. Problem 2: I added a border to the same container “border: solid #333 1px” which again looks fine in Design View, but stacks behind top menu in LiveView. Hope you can advise what am I doing wrong? Many thanks.

jcook June 23, 2009 at 8:54 am

I’d have to see the actual page before I could make a guess on that one.

Carel June 8, 2009 at 2:29 pm

I would like to insert a vertical spry menu bar on the right side of my page, is there a way to make the sub menu’s go out to the left?

jcook June 8, 2009 at 4:33 pm

It’s relatively simple. In the ul.MenuBarVertical ul style set the left margin to -95% (or whatever you prefer):

margin: -5% 0 0 -95%;

Steve September 1, 2009 at 8:06 pm

Hi i want to place a menu bar at the bottom of the page and have the submenus come out the top of the menu.

i have tried modifying the margin as you have suggested before but this orders the menu wrong and while it will place them above the menu it doesnt have subitem 1 at the bottom and say sub item 3 up the top. which means if not all menu has the same number of items the layout looks strange.

can you help if you understand what i mean.

jcook September 2, 2009 at 11:56 am

I’m not exactly clear on your issue. Is the a url where I can look at the problem?

Andrew June 8, 2009 at 8:28 am

I have created a vertical spry menu in CS4. I am working with a template set up. When I preview in a web page the sub menus pop up behind an image I have, or behind the text if I remove the image. Thank you for any help.

jcook June 8, 2009 at 8:51 am

Sounds like a CSS Z-index positioning isue, but I need a link to look at the page to be sure and to offer any suggestions.

gwcc May 24, 2009 at 10:41 pm

I’m designing a very simple website. There are only 2 levels to my navigation. I want a horizontal navigation that only shows level 1; I also want the site map to display in the Sidebar, with an indication of not only what’s available, which pages have been opened. How do I do that?

jcook May 27, 2009 at 7:26 am

If you want only one level of navigation, then don’t add any submenus when you build your menu. Although, to be honest, Spry Menus are a bit of overkill for accomplishing that (which is not to say I haven’t done it). You’ll also need to delete the content of the default submenus that Dreamweaver provides.

You can either build the site map by hand (an unordered list would work well) or search for a Dreamweaver Extension that will do it for you. When you create styles for your links, just be sure to include an a:visited style. That will determine the format of the visited links.

Ben May 22, 2009 at 7:44 am

Just designing the site in DW CS4. The Spry Verticals work in IE, but in Safari & Firefox, when you put the pointer/cursor over the submenu, one of the submenu bars is up on the top test & is toggling very fast between that submenu title & the submenu title below it. Also, all the submenus are showing all the time to the right of the Main menu. Can you help me. I’m new but determined. Thanks so much for this fine tutorial. It is very usefull & well written for folks like me.

jcook May 22, 2009 at 9:12 am

Is there somewhere where I can look at the page. If you post a URL I’ll see if I can help.

Ben May 22, 2009 at 1:32 pm

Still under construction. I have a test site up @

I’m just loading all the new files right now. Should be done in 10 minutes. Thanks for the quick reply.

jcook May 22, 2009 at 2:09 pm

Let’s start with this. In the ul.MenuBarVertical ul (submenu) style you have changed the position property to “right.” That’s not a valid choice for the position property. You need to return it to its original setting:

position: absolute;

That’s used to set the submenus off the page until they are called by hovering over a main menu item.

There may be more problems but start there and we’ll see what happens.

Ben May 22, 2009 at 2:21 pm

JC (if I may), that worked wonders on the issues in IE. In both Safari & Firefox, I get the same strobe effect when the pointer over the various submenus names & the displacent of the first submenu name to the top. Lots of non-stop flickering in the boxes.

jcook May 22, 2009 at 2:50 pm

Next step is similar to the first. You added position properties to two other styles. You need to delete them. So:

In the ul.MenuBarVertical a style delete: position: relative;

In the ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus style delete position: fixed;

Lesson: With Spry Menus NEVER mess with the positioning.

Bonus Lesson: You don’t need to set every property for ever style. For instance since you set font-family: Verdana, Geneva, sans-serif; in the ul.MenuBarVertical style that will apply to everything in your menu (which is actually an unordered list or ul). So it’s redundant to use it again in the ul.MenuBarVertical li and other styles.

Ben May 22, 2009 at 4:03 pm

Did as told. still get the same problems with the fluttering submenus in Firefox & Safari. Any other thoughts? I did a test by using a fresh test template HTML, 3column, liquide & placed the defaul SPRY menus. They are giving me the same issue.

jcook May 22, 2009 at 4:09 pm

Ben, refresh your browser now works fine for me in all the browsers I tested.

Ben May 22, 2009 at 4:20 pm

JC, you are the best. I can’t say enough about the community of people like you that extend yourself to folks like me. Once again, thanks.

herberthooverkid May 19, 2009 at 9:23 am

i need help customizing the spry menue bar on my schools web page and i have no idea how to do it.

jcook May 19, 2009 at 9:29 am

That’s what this tutorial and are all about. If, after reading the appropriate on, you have specific questions I can try to help.

If you just need to change or add links, select the entire menu (click on the blue box above the menu) and edit the links in the Properties Inspector.

Christinek May 15, 2009 at 8:59 am

I have designed this site and have a vertical dropdown menu that works fine in safari, firefox etc but doesn’t show up at all in IE… i’m not really good with code so i dont really wanna mess with it but i think that could be where the problem lies…i don’t want to upload the site until it is fully functioning in IE…any help asap would be much appreciated! :)

jcook May 15, 2009 at 10:05 am

Is there somewhere where I can look at the site? Without seeing the html, css and jscript it’s hard to make a guess.

Christinek May 15, 2009 at 10:25 am

Can i send u the site via email? I have compressed the dreamweaver file so it shouldnt be too large…

jcook May 17, 2009 at 8:53 am

Christine, I see a couple things that could help.

In the SpryMenuBarVerticall.css style sheet, rather than set the width of ul.MenuBarVertical to auto, set it to the width of your main menu images – width: 237px;

Also, add a style to remove the boders around your image links:

ul.MenuBarVertical a img
border: 0 none;

Christinek May 17, 2009 at 11:41 am

That seems to have done it! Thanks so much…I really appreciate your help! :)

Sarah Bradbury May 13, 2009 at 3:09 pm

When I preview my site in IE the following message pops up: “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options…” Unfortunately if the visitor doesn’t click on “allow blocked content” then they won’t see my vertical menu bar. Is there anyway to tweak the Spry Menu Bar Vertical so that visitors don’t have to click on the bar at the top of the screen stating they “allow blocked content?”

jcook May 13, 2009 at 3:32 pm


That’s an Explorer “feature.” It won’t happen when viewing your site online only when previewing it from your local computer. You can get around it by inserting a “Mark of the Web” into your page (menu Commands>Insert Mark of the Web). If you’d like more information check out

jcook May 13, 2009 at 3:58 pm

You should also take a look at your website on a Mac. The vertical menu is off the top of the page. All I can see is the contact button.

Sarah Bradbury May 13, 2009 at 4:11 pm

Wow – thanks for the quick response! I’ll look into your suggestions. I’ve also realized the vertical spry menu bar doesn’t work in firefox. Got any ideas to fix that???

I’m so glad for your help!!

jcook May 13, 2009 at 6:09 pm

I’m familiar with the Spry menus from Dreamweaver CS3 & 4. This looks like an earlier version. I’ve seen it before and I wasn’t able to work out the problems.

This part does look a bit odd in your CSS for ul.MenuBarVertical:

padding-top: -.5; // it needs a unit (pixels, ems, etc.)
position: fixed; // not sure why this would be necessary

Don’t think either would cause the problem though.

Also, in IE your contact and last updated info are missing (or hidden by the menu?).

Sarah May 13, 2009 at 9:40 pm

The version I used was CS4. Any ideas where else I could get some support?

jcook May 14, 2009 at 6:03 am

OOPS! Sorry, you’re right. I misread the header info. I’ll take another look and you might consider posting at the DremweaverClub forum (

jcook May 14, 2009 at 11:41 am

You didn’t try deleting the position: fixed; in the ul.MenuBarVertical style. Now that I look again, that should do it. Also delete top: 0px;

And, again, this doesn’t make sense: padding-top: -.5; (It needs a unit of measure.

Finally, (still in the ul.MenuBarVertical style) height: 20px; is too small since it applies to the whole list. I’d just delete it as well.

Sarah Bradbury May 18, 2009 at 5:50 pm

THANK YOU for your help!

FYI: In addition to your changes I also found that it helped to delete the absolute position in the ul.MenuBarVertical li style.

However, now my submenus are static and won’t go away. What style would affect this?

jcook May 18, 2009 at 6:48 pm

Sarah, the absolute positioning is necessary in the ul.MenuBarVertical li style to initially position the submenus off the screen (effectively hiding them). So you’ll need to put it back in.

Sarah May 18, 2009 at 7:52 pm

Ok. I changed the ul.MenuBarVertical li position back to absolute, but now it’s showing them all stacked on each other and the submenus are showing and stacked on themselves also. What next?

jcook May 18, 2009 at 8:04 pm

The page I’m looking at doesn’t have the changes I suggested earlier.

Sarah May 18, 2009 at 8:32 pm

You’re right, I haven’t put them online yet. I’ll have to do that tomorrow morning at the office. Tune in at that time! Unless you can tell me now which rule affects the submenus showing when you’re not hovering over them.

Sarah Bradbury May 19, 2009 at 7:58 am

Okay, it’s up. I’ve got issues with the vertical menu in firefox and IE now.

jcook May 19, 2009 at 8:14 am

Sarah, here’s one change you made that would break things:
in the ul.MenuBarHorizontal ul style you reset the margin to 0. It needs to be margin: -5% 0 0 95%; to initially place the menu off the page.

I’m afraid that’s all the time I can devote to this. You’ve got so many changes in the styles that I’d suggest deleting the menu, starting over and following this tutorial very carefully.

Good luck!

Peter C May 7, 2009 at 8:06 pm

Having problems with spry showing perfect in FF but not in IE7. Please help. Need this for my client ASAP. I used DW CS3.

website link:

Thank you.

jcook May 7, 2009 at 8:38 pm

try setting a width (auto, 100% or pixels) in the style for the links: ul.MenuBarVertical a

pete May 7, 2009 at 8:49 pm

It worked. Thank you very much.

Sharon April 29, 2009 at 6:51 am

Hi, I posted a question earlier but it seem to have disappeared…
My question is , how do I get spry menubar to display properly on Firefox. The spry menubar I created seem to work fine on IE but when it comes to Firefox the last tab of the main menubar got squeezed out and thus not aligning as it should be –

Any suggestion on how to fix this?

jcook April 30, 2009 at 7:17 am

Sorry, I was in the process of moving this post to my new (and more active) blog and yours got lost. I’ll take a look this afternoon (I’m headed out of the office).

jcook April 30, 2009 at 7:20 am

Actually I do see something right away. You have a lot of extra junk in the code:

<div><a href=’#’ rel="nofollow">&lt;b&gt;&nbsp;&nbsp;&nbsp;About Us&nbsp;&nbsp;&nbsp;&lt;/b&gt;</a></div>

Take everything inside the div tags out but the link and text and try it again:

<div><a href=’#’ rel="nofollow">About Us</a></div>

Sharon April 30, 2009 at 7:36 am

Thanks for your time, you were right about the junk code, I am working on a clean new version:-

the same problem still persist…logically the same issue on this link is fixed, the other link would be too.

Sharon April 30, 2009 at 7:58 am

oh sorry I meant “…If the same issue on this link is fixed, the other link would be too.”

jcook April 30, 2009 at 12:28 pm

You defined the width of ul.MenuBarHorizontal li as 85,45 pixels. Try deleting that width and setting an overall width for your menu ul.MenuBarHorizontal in pixels or 100% rather than auto.

Sharon May 1, 2009 at 1:34 am

Just did what you suggested, now the menubar is inline but too short despite the width in ul.MenuBarHorizontal being 100% or 769px(the width for the table as well as the flash). This happens to IE as well as FF, as previously the problem occured only in FF before I made these changes…

Sharon May 1, 2009 at 1:47 am

Also, now that I deleted the width (85.45px) in ul.MenuHorizontal li, the width for each tab is now not uniform and I would like them to evenly spread out…

jcook May 1, 2009 at 8:42 am

Best I can suggest is go back to giving ul.MenuBarHorizontal li a pixel width and reduce it a couple picels at a time until it works in firefox. You might also try giving them a width of 11% since there are 9 menu items. Sorry I can’t be more help.

Arpita Dasgupta March 18, 2009 at 10:21 am

I have created a vertical spry menu using DreamWeaver. When I set background color for Vertical menu it worked fine……………..but when I set a background image only in the menus which doesn’t have submenu the change is reflacted.
Here is my CSS :
ul.MenuBarVertical a
display: block;
cursor: pointer;
/*background-color: #FFEBBF;*/
background-image: url(../Image/bg1.gif);
background-repeat: no-repeat;
padding: 0.2em 0.75em;
color: #0099FF;
text-decoration: none;
What’s wrong in my case?

studioJMC March 18, 2009 at 1:19 pm

Menu items with submenus are controlled by the ul.MenuBarVertical a.MenuBarItemSubmenu style. You’ll probably want to make a special background for those items that includes an arrow.

Sharon March 14, 2009 at 12:00 pm

Hi there, I’m trying to create a spry menu with a black background and when you mouse-over a menu item (turns orange) and the sub menu (turns grey) appear. I would like it to have a different color background on hover state for menu items which have got no dropodwns. Right now menu items which has got no sub menu is showing the same colour (grey) as the sub menu of menu items which have dropdowns. I cannot figure out a way to change the background colour (hover sate) of the menu and submenu independently. I stumbled into a suggestion that a new class can be added to the CSS:-

ul.MenuBarHorizontal ul.classnamehere {

tried it but made no difference.

Any advice greatly appreciated. Thanks!

studioJMC March 14, 2009 at 4:00 pm

Without a link to the page, it’s hard to say what the problem might be but I’d I suggest a custom style that is applied directly to the link (or A) tags that you want to customize.

Sharon March 14, 2009 at 4:30 pm

Hi studioJMC, this is the link

Thanks in advance for your help!

studioJMC March 14, 2009 at 5:51 pm

BELOW the style: ul.MenuBarHorizontal a try creating a new style that will apply only to links within submenus (notice the second ul tag that I’ve inserted)

ul.MenuBarHorizontal ul a

Let me know if that works.

Sharon March 14, 2009 at 6:26 pm

Hi there, tried the new ul tag you suggested, it changed the colour for visible state just for the submenu bar instead of hover state. Then I tried

ul.MenuBarHorizontal a:hover

in the same insertion point but nothing happened.

studioJMC March 14, 2009 at 6:35 pm

This would change the hover state of the submenu links (have to remember that extra ul):

ul.MenuBarHorizontal ul a:hover

Sharon March 14, 2009 at 6:50 pm

Hi studioJMC it works!!!
Thank you sooooooo much for your help!
This thing has been bugging me for the last 3 days!!!
Have a great weekend!

kelly March 4, 2009 at 4:05 am

Well, i’ve created the drop down menu using the srpy collapsible panel. Now i have to click on the tab to see the drop down, what if i wanna change to mouseover instead? U know…when mouseover, the drop down appears, when mouse out the drop down closed.

Aaron February 15, 2009 at 10:17 pm

Hi guys. Nice informative article.. I thought I would post my problem, see if anybody could help.
When I click on insert spry menu bar, and then choose the vertical one, it only shows a single box, instead of the default 4. In the bar properties, it lists all 4, but I cannot see the others, or move them etc..
The vertical bar works as normal, just not the horizontal one. I tried on a new document aswell, and it keeps just showing one bar. Thanks.

Ashish February 10, 2009 at 10:53 am

How will I be able to fix vertical menu’s submenu’s height?

Tashlentine January 30, 2009 at 8:19 pm

i’m still in the programming part, and i’m one of the least tehnological members of the species, but the problem i’m having is the site i’m making links to two other sites – i’m using a spry menu on all of them (and they’re all different menus) but for some reason, the spry menu on one of the websites just will not save the spry asset files to the right folder location, and gives me the customised version of the menu i made for one of the other sites? i really have no idea why it’s doing this – i even tried remaking the entire site (thankfully i’d only made the index page) but it still saves it to the wrong place. when i try copy and pasting the spry folder into the folder for that site, and altering it from there, it doesn’t make a bit of difference, and any alterations i make to the css code on it mucks up the menu on the other site too. I’m tearing my hair out over this because i can see no logical reason why it’d be doing this. any idea what i’m doing wrong? Thanks in advance for anny suggestions/solutions!

Vivalin January 9, 2009 at 4:14 am

Thanks for that. I knew it wrapped in IE. but the link I posted was for where it was originally hosted but will shortly come down from there as it is just a temporary place to host.

Where it is hosted now is and like you’ve said I’ve tried to move the Spry Assests folder around to various places but this doesn’t seem to work. The (~vbrewe01) folder was for the original site and I am uploading all the stuff from a different folder not associated with that one even though it came from their originally.

I don’t think their are any links left to that ~vbrewe01 directory, because the links all work it’s just the Spry menu itself not appearing. Nor the sub-menu when viewing on IE.

Again many thanks for helping!

studioJMC January 8, 2009 at 2:56 pm

@Vivalin the menu at the link you sent works (although it wraps to two lines in IE – usually the result of applying a width and a margin or border to the same object).

If the link you sent is your test site, I suspect the problem is that the test site is in a directory (~vbrewe01) on the test server and not on the final server. That might break the links. Also as you seem to be aware, uploading outside of DW requires that you place all the files in exactly the same place. I’d bet it’s one of those two things but can’t be sure without seeing the final site.

Vivalin January 8, 2009 at 12:04 pm

I’ve built this website and had it hosted on my uni server and everything worked fine – . Now I’m trying to host it for good on a payed for server and using SmartFTP to put it onto the server. However I finally got the pages to load as well as the images and not to say error or forbidden but my Spry Menu Bar doesn’t want to work.

It sort of works in IE where it displays the menu (though not the sub menu) on all pages bar the index. and with Firefox and Safari I just get a list of the links that do work but are in a vertical list over my content rather than i nice horizontal bar above my content.

I’ve tried moving my Spry Assets folder into various places on the server to see if that alters it but that doesn’t seem to make a difference. Also when i open it in IE a error symbol appears at the bottom of each page and it all leads to the one line on each page which is: var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”SpryAssets/SpryMenuBarRightHover.gif”});
but I can’t see that there is anything wrong with this line as it worked previously when hosted on the other server.

please could someone help me urgently I don’t know what I’ve done wrong and I need this site to be working ASAP!


studioJMC January 5, 2009 at 11:09 pm

BTW, it would help us answer questions if you could include a url for a page that demonstrates the problem you are having.

studioJMC January 5, 2009 at 3:00 am

@Diane, that’s usually a matter of the widths (including padding and margins) of all your divs not adding up. Try reducing the width of the div for the right side and see if it helps.

Diane January 5, 2009 at 2:33 am

I am having an issue with a vertical spry menu on my website. I works great but my issue is that it moves down on the page when I add content to the right side of the page. The menu is on the left and the more I add to the right the further it moves down. I had tried everything I can think of…am I just missing something simple? I am using a template…I’ve tried to look at the code but I can’t see where the problem is.

Chris November 17, 2008 at 8:57 pm

I am having an issue with vertical spry menus. They show up fine except in Safari, the links work when you click on the space where the link should be – Thanks


Aaron August 28, 2008 at 8:12 pm

I’m going nuts on this. Any help would be very appreciated. I’ve builkd out a site that’s good in every single browser EXCEPT IE on PC. Somehow, IE is adding a 3px border to about 1/3 of the submenu.

I’ve tried and failed numerous options and cannot find the troubelsome rule. Any thoughts?

Design Refugee August 27, 2008 at 8:58 am

@ SteveM
Dreamweaver isn’t set up for that but I would think you could hand code it simple by inserting an additional nested unordered list. Just make sure to duplicate the styles from other submenus.

@ stuck on frames
There are so many reasons to avoid frames. If your menu changes frequently you should consider moving it to an include file ( That way you only have to update and upload one file when the menu changes.

stuck on frames August 27, 2008 at 2:28 am

A pages space is so limited, Is there anyway to put the vertical, or the horizontal menu, into a frame, and not use half the page to let it expand, or, is there a way to use one menu and not use frames. My menu changes almost dailey. hmmm would be great if layers could be html pages…

Steve M August 25, 2008 at 11:41 pm

This is good for the standard user, I am however looking to add a 3rd level drop menu to the dropbar (such as you can get with the flyout menu) how can this be done and show normal?

Design Refugee August 19, 2008 at 9:21 pm

@rossnroller check out our article on horizontal menubars and see if that helps. It’s at

Design Refugee August 19, 2008 at 9:18 pm

@jotto, make sure you’ve uploaded all the css and javascript files to your website.

jotto August 17, 2008 at 2:28 pm

Hey all, Ive just started with CS3 and have inserted a vertical menu but all my site content comes after the bottom of the menu and not to its right hand side of it. Im a complete n00b but would like my menu down the left hand side and some text and images to the right. At the moment it seems as though the menu is full width of the page.
If I try to add text or images to the right, it just appears in the menu…eek..please help, in very basic terms please!

rossnroller August 15, 2008 at 4:30 am

Hi. I’ve been googling for hours trying to find out 2 things I suspect are very simple. Sorry to land them on you, but I’m out of options! It might make my questions easier to understand if you refer to my website (currently password protected until it is ready to go “live”).
User name: tester
Password: testing123

1. I only have 5 items in my horizontal menu, and they stop half way across the page. I want to extend the menu so it stretches right across the page/browser, as a table might do, while keeping the menu items left-aligned, where they are now. How do I do this, please?

2. If, instead of the above, I wanted to separate the buttons of the menu bar so they have equi-distant space between them, how would I do that, pls?

Design Refugee July 29, 2008 at 9:58 am

@ Émilie: For whatever reason, it looks like the link to your javascript and/or style sheet are not working. Double-check them.

@matthias: you can assign a background image to the link (a) tag.

@eddie: I’m not sure about that one. Sounds like javascript and.or active x support may be turned off you explorer 6.

@Kieth, we’d need to see an example.

Émilie B July 29, 2008 at 9:44 am


I have the same problem than Derek Durbin. Could you give us any advice?

thanks a lot, cause I really have a headache with that spry….


matthias July 20, 2008 at 2:14 am

Is there anybody who knows how to get a background image in every menu item?

eddie July 17, 2008 at 2:49 am

spry menu bar vertical not working in explorer 6 [it can not be sean at all] , it does work very well in explorer 7 and the new firefox

another problom is – in explorer only it ask if it is ok to use active X for this site?
can we do any thing to avoide that?

any ideas

Keith May July 9, 2008 at 11:17 pm

I created a vertical spry menu in DW CS3. It works in Opera, Firefox and IE7. IE6 wont show the menu fonts unless you mouse over them? Any thoughts?

Richard June 24, 2008 at 4:02 am

I am using DWCS3, I have added a Vertical Spry Menu Bar in my pages, it works fine in IE but it is flashing in Netscape. Any idea why?
Many thanks

Newbie May 19, 2008 at 10:53 pm

Hi im really new at CS3 and im creating a vertical menu, i was wondering how to go about creating the menu using images at buttons

Pride Grimm May 18, 2008 at 12:23 pm

Hello! I have added a few spry widgets to a page I am working on. In the beginning, if I would highlight the widget, the properties panel changed to allow me to edit the widget via it’s custom menu. For some reason, now when I highlight it, that option is not there. Does anyone know what happened? Or, what I can do?

Ryan May 12, 2008 at 11:37 pm

Just a note, there’s a new pure CSS menus Dreamweaver extension called CSS Menu Writer that creates horizontal or vertical multi-level navigation. It has a slick interface and the menus are completely customizable. Eric Meyer had a hand in development, so the code is compliant and validates.

STEPHANIE May 12, 2008 at 3:49 pm

Hello, I’m hoping for a response since I’m really a beginner and I’m getting really frustrated. I have a beautiful site created, however, I haven’t figured out how to put my spry menubar into a template. I saved it as an editable region, but only when I go to create a new page based on the template, is the spry updated. In other words, I can’t get the rest of the pages I’ve made from the template to update when I make a change on the spry…any feedback would be wonderful! Thanks.

JS May 9, 2008 at 2:49 pm

anyone experience a left offset, when working with 2nd level submenu, in a horizontal Spry menu bar? It appears fine in IE but in Firefox and Netscape, the third submenu level appears shifted left by 18pixels, but not in IE. I have the margins set correctly but FF and Netscape (ie. 0 0 0 100% (as I did not want any offsetting but flush alignment with the 1st level submenu items) seem to be ignoring this property setting in the CSS file.

rick haffer May 1, 2008 at 2:27 pm

thanks to Brenda and Rick
I have abandoned the frame idea and am moving on to css and templates.

Design Refugee May 1, 2008 at 2:25 pm

Kitzmiller, I don’t know what would be involved in making that happen using DW menus but Pop Menu Magic plugin ( ($90) can do it. I’ve used it a lot and recommend it if you can justify the cost. Also, it requires a pretty extensive knowledge of CSS to customize the resulting menus beyond the variations that are built into the plugin.

Design Refugee May 1, 2008 at 2:22 pm

@Brenda and rick,

Sorry but you can’t make menus from one frame extend over another frame. Each frame displays a separate html page and there is no way for the content of one page to display outside of its frame. I’m not sure why you would want to use frames in any case as they present a number of other problems as well.

rick haffer May 1, 2008 at 11:35 am

whoops. forgot to add the obvious. how do i make the submenus appear on top of the mainframe when opening in the topframe.


rick haffer May 1, 2008 at 11:34 am

I have a spry horizontal menu in a topframe. In the browser, when i click on item one the submenu opens behind the mainframe.
thanks for your suggestions.

Kitzmiller April 29, 2008 at 2:01 pm

Does anybody know how or where to find content on creating a down state or current tab style? For instance, when clicked and sent to another page, the tab stays a certain color. Any ideas?

Eddy January 29, 2010 at 4:41 pm

Hey Kitzmimller, Did you ever find out how to change apply the current state to your spry menu? I tried using a class but I did not have any luck. Let me know please, I would really appreciate it.

Brenda April 27, 2008 at 1:41 pm

I am re-creating our school website. I am using frames. When I create my Spry in my left pane, how can I get the sub-menus to go to the main frame. I am using CS3. Mainframe is not an option in the drop-down list of th spry menu.


Gavin April 18, 2008 at 8:25 pm

so this is what I have now…im a little new to this so if I am way off base im sorry.

Item 1.1
Item 1.2
Item 1.3

Item 2
Item 3

Item 3.1

Item 3.1.1
Item 3.1.2

Design Refugee April 18, 2008 at 8:07 pm

@Gavin, more like this:

ul.MenuBarVertical {
background: url(/images/concord-menu_02.jpg);
ul.MenuBarVertical {
background: url(../images/concord-menuOV_02.jpg);

with your link looking like this:

That should get you started anyway.

Gavin April 18, 2008 at 7:56 pm

Thank you for the quick response. Could you give me an example of how to do that. The code for the first style is
ul.MenuBarVertical a
display: block;
cursor: pointer;
color: #333;
text-decoration: none;
height: 65px;

can I create a different style (i.e.)

ul.MenuBarVertical2 a
display: block;
cursor: pointer;
color: #333;
text-decoration: none;
height: 65px;

notice the 2 that I put in?? thanks again…hopefully im not asking too much

Design Refugee April 18, 2008 at 7:34 pm

@Gavin, you can do it by creating a separate style for each tab link and using your image as the css backgrounds for the links.

If you do that you’ll want to hide your actual link text in some way.

Gavin April 18, 2008 at 6:51 pm

I was wondering if anyone knows how to change the appearance of each individual tab. I have 3 images as buttons and want them to have the flyout appearance. When I apply the image it affects every box. Any help would be greatly appreciated!! thanks

karine April 14, 2008 at 2:25 am


I’m having problems seeing the submenus on Firefox, and Opera. IE works but there’s something funky happening there aswell when rolling over the buttons with submenus. Can anyone help?


Stu March 17, 2008 at 4:24 pm

The above tutorial is great… Sorted out a problem I was having with sizing!! Thankyou! However.. I’m working on a website in Frames.. Within one of the frames I’m trying to create a spry menu bar that appears from a button. The button is already created with rollover effects.. Everything sits nicely together until I try to create the spry Menu.. Been a knightmare!! Anyone out there that could aid me?? Thanks in advance


Tina March 13, 2008 at 9:22 am

I am having a problem with IE 6.0 closing with the standard error saying that IE has to close because of…. when using the spry menu bar. Any ideas what may be causing this.

Derek Durbin March 1, 2008 at 8:45 pm

Hi. I’ve been working with Dreamweaver CS3 and its Spry Menu Bar options. I created a really nice looking menu bar at the top of my pages and it worked great when I viewed it in Explorer 6, but when I actually uploaded it to my server and previewed it, it showed up as a bulletin list. What would cause this? I uploaded all the support files that went with the menu bar so that it would function correctly, but it did not work out. I also deleted all the files and recreated and re-uploaded it, but I had the same result. Any advice?

Ankit October 1, 2009 at 6:11 pm

you need to copy spryassets folder too on the server.

jcook October 3, 2009 at 3:18 pm

When you upload your page in Dreamweaver the files in the Spry Assets folder are considered “dependent files” and Dreamweaver will upload them if you click Yes at the prompt.

Lance January 21, 2008 at 8:51 pm

I am having the same problem but I can provide a few other details. I have defined a:visited (along with a:link, a:hover, a:active)in a CSS style sheet separate from the Spry Menu bar style sheet, along. The one that overrides the Spry Menu Bar is a:visited. It changes the menu bar colors to what is defined in a:visited once I have gone to that page. Naturally this only occurs in IE.


Design Refugee January 6, 2008 at 12:28 pm


I suspect it has to do with a visited link style (a:visited) which is different from the plain a or a:link style.

If you send me the url of the page I’ll try to take a look.

Joe McLaughlin January 6, 2008 at 10:19 am

I am having a problem with IE6 (who isn’t) and my vertical menu. When a menu item is chosen to go to another location and you return to the menu, the appearance of the text has changed to what appears to be a default un-bolded font. Sometimes when a page loads the font’s are all default.

Any help, suggestions would be appreciated.


Comments on this entry are closed.

{ 1 trackback }

Previous post:

Next post:

Home | Make Contact