Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver

by James Cook on July 14, 2007

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

Click here to learn about Creating and Customizing Vertical Spry Menu Bars…

I should start by saying that Adobe has done an excellent job implementing spry menu bars. More to the point, they have documented the CSS files that control the appearance of the menu bars with ample notes to guide the adventurous. They’ve even included a help file that’s actually helpful. Still, in my experience, a program’s documentation is the last place people look for help so I’ve put together this little tutorial.

Note: For the most part the process of customizing horizontal and vertical menu bars is the same but there are differences so I’ll follow up this post with one devoted to vertical menus. However, if you can’t wait, the instructions offered here should provide a good basis for your own experimentation with vertical menu bars.

Getting started:

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

Create a horizontal menu:

  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 horizontal menu bar, select horizontal 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:

Menu Bar CSSGood, 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 (SpryMenuBarHorizontal.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. For instance, you should know - or be able to figure out - that when I say “set width: 20%” you should change the style definition so that the width attribute is set to 20%.

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.MenuBarHorizontal style. The color of the text will be defined elsewhere.

Menu bar width:

By default, the width of each menu item is set to 8 ems and the overall menu width is set to auto (determined automatically by the width and number of menu items).

To specify a specific pixel width for a menu bar: In the ul.MenuBarHorizontal style replace width: auto with width: XXXpx AND set the width attribute in ul.MenuBarHorizontal li to an appropriate value in either percent or pixels.

In other words, if ul.MenuBarHorizontal is set to width: 600px and there are four items in the top-level menu, an appropriate setting for ul.MenuBarHorizontal li would be either width: 150px OR width: 25%. For a 600 pixel wide top-level menu with 5 items the appropriate setting for ul.MenuBarHorizontal li would be width: 20% or width: 120px. Just make sure everything adds up or you may get unexpected results.

Note that changes made to ul.MenuBarHorizontal li affect only the items in your top level menu. The width of pull-down menus is not affected. Also, you should avoid adding borders to the ul.MenuBarHorizontal li style. They’ll throw off the width calculations we made above.

Menu bar height:

Caution! You can control the height of your menu bar by specifying a height attribute in the ul.MenuBarHorizontal 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.

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.MenuBarHorizontal 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:

  • ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
  • ul.MenuBarHorizontal 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:

The way DW menu bars are constructed, menu items which open to submenus have an arrow (downward -pointing for top-level menus, right pointing for sub-menus) 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.MenuBarHorizontal a.MenuBarItemSubmenu for top level menu items with a submenu.
  • Edit ul.MenuBarHorizontal a.MenuBarItemSubmenuHover for the hover (rollover) state of top level menu items with a submenu.
  • Edit ul.MenuBarHorizontal ul a.MenuBarItemSubmenu for submenus with a second-level submenu beneath them.
  • Edit ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover for the hover (rollover) state of submenus with a second-level submenu beneath them.

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

  • SpryMenuBarDown.gif – black arrow pointing down
  • SpryMenuBarDownHover.gif – white arrow pointing down
  • SpryMenuBarRight.gif - black arrow pointing right
  • SpryMenuBarRightHover.gif - white arrow pointing right

Looking for More Dreamweaver Tips, Tricks & Tutorials?

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

Couture Men's Suits San Francisco July 18, 2016 at 6:33 pm

This is a very helpful article. We are using spry menu bars on our website and this really helped clarify how to fix an error that we were having.

Ken August 24, 2013 at 5:33 am

Is there a way to prevent search engines from counting links in the spry menu bar? My site dropped off the map a while ago for our keywords and when I run SEO tests the only problem I can find is that many of the tests show “too many outgoing links”. Saying there are 133. I’m guessing there are about 40 if you don’t count the ones in the menu bar. Thanks!

James Cook August 28, 2013 at 8:25 am

For SEO purposes, if the links are to pages within your site, they are not outgoing links and you should keep them.

As for true outgoing links, 40 is a lot. To keep Google from “counting” them add a nofollow tag to the links like this:

link text

Vincent October 19, 2012 at 5:55 pm

I figured out what i did wrong. I made a brand new horizontal spry menu. Deleted all my old files in Spry Assets and started over from scratch. Now comesthe tidious part of figuring out how to style it the way I want and not break the ten commandments. My rollovers are now where Item 1 was, and my submenu drops down now. Problem now is I have a gray and blue background and wide box behind my rollover, need it to go away without messing up the spry assets.

Karen June 30, 2012 at 2:03 pm

Is it possible to set the width on each of your headings/menus in your spry menu bar individually?
Some of the titles are longer than others, and I want to set each one individually… I have tried “auto” but then the menu bar isn’t as long as I want, since I want it to go all the way across my page.
Any ideas? Thank you!

dwcourse June 30, 2012 at 2:40 pm

It’s possible but you’ll need to create a custom style class for each width you need and then apply them to the appropriate list item (li) tags.

For instance:
.width160 { width: 160px; }

<li class="width160>etc.</li>

You’ll probably have to do it in the code since versions of Dreamweaver prior to CS6 don’t allow you to assign multiple style class to an html tag visually.

Polly June 20, 2012 at 8:30 am

Your information has helped me immensely. I have been helping a friend out with his website and was having major issues setting up the spry nav bar. I realized after reading the 10 commandments that I had broken pretty much every commandment. I reloaded the default spry css settings and started from scratch following your instructions on how to change the width of the horiz nav bar to fit a certain area (in mine being a table row). It seems to have worked and looks fine in FireFox, but not in Chrome or other browsers. How do I fix it so it works in all browsers (in Chrome it is not going to the edge of the table).
Here is the link:
I would appreciate any help you can give.

dwcourse June 20, 2012 at 9:08 am

The problem isn’t your menubar but your table. Something in the table is causing it to expand to 825px width which means your 800px menubar isn’t long enough to fill the space. Sorry but I can’t see an obvious reason for the issue but that’s one of the reasons tables are no longer considered a best practice for web layout.

JPaciorek March 20, 2012 at 12:32 pm

Thank you for the course and the 10 Commandments! Although I didn’t read them before I started, I did read the css comments and didn’t stray too, too far. Having said all this, I have a problem with IE. I use IE9 so am using the latest browser. I put in a horizontal menu with submenus. The submenus display as horizontal not verticle in IE only. The other browsers are fine. Can you help? I see that Kyle had the same question, but I didn’t see an answer here.

I’m very new. So it is very possible that I missed something…My test site is

Thank you so much.

JPaciorek March 20, 2012 at 1:11 pm

I think I found a fix…..

I added ‘clear: left;’ to ul.MenuBarHorizontal ul li and it seemed to do the trick. It didn’t seem to disturb the menus in other browsers that I tested so far.


janice March 3, 2012 at 6:26 pm

I am having trouble with the visted link on the spry menu. It works on the home page but I try to do the same thing on showroom and the visted links change on the spry menu. How can have the spry menu links different from the page links? Why is it working on one page and not the other, I have checked everything….

dwcourse March 3, 2012 at 10:42 pm

The menus on your site at change throughout the site so it’s hard to know exactly which menu you want me to help you with.

Matt February 13, 2012 at 7:06 pm

How do I make a spry bar like on ?

dwcourse March 3, 2012 at 10:52 pm

This page should help you get started. there’s really nothing particularly out of the ordinary about the menu on that page.

Kyle February 8, 2012 at 8:40 am

Hi again.

I want to first thank you for your help with my previous issue. I got it solved and everything is working great in everything but Internet Explorer. Now the drop down menus are showing as horizontal instead of vertical. Any advice?

Kyle February 1, 2012 at 10:32 am

HI There!

I am designing a website for our organization and have it mostly completed. The only remaining issue is that the sub menu’s won’t drop down in any browser. I am at a complete loss as to what to do. Any help would be appreciated!

dwcourse February 1, 2012 at 10:52 am

If you look at the code of your page you have:

<script src="file:///C|/Users/SJSCI Laptop1/Desktop/Safe Communities/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/SJSCI Laptop1/Desktop/Safe Communities/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

The file:/// at the beginning of the links indicates the link is to a file on your computer. So when the site is accessed on the web it breaks. Generally this is caused by not defining (setting up) your site correctly. I would imagine the links should look something like:

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

Glynne January 25, 2012 at 1:18 pm

Hi Dw

Wonder if you could help me.
Im using an image on repeat as background across the the main navigation of the spry menu.
But, i want to use a plain colour for the dropdown/submenus??
Its currently using the same image im using in the main nav above.
I keep going around in circles with the CSS and cant figure it out??

thanks in advance


dwcourse January 25, 2012 at 1:28 pm

You can use the image as a background in the ul.MenuBarHorizontal a rule.

Then in the ul.MenuBarHorizontal ul a (the second ul means it only applies to links in submenus) rule (you may have to create it) set background-image:none and set background-color to whatever you want.

BTW, if you use the background shorthand property it resets all the background properties. So all you really need to do is:

ul.MenuBarHorizontal ul a {
background: #000;

Substituting whatever color you prefer.

Jaime December 14, 2011 at 12:07 pm

I’m having a problem with my spry horizontal menu bar. It centers on the rest of my page fine in ie, firefox and chrome on my computer at 1280×1024, which is the max res on my machine. However, the menu bar moves to the left on my friend’s mac. His machine has higher resolution, and he runs both firefox and safari and it happens on both browsers.

I built the site with tables, which I know is problematic, but I don’t know how to write code. I’ve tried everything I can think of, including centering the menu between div tags, but nothing helps.

Any ideas? I’m desperate at this point, as my site was supposed to launch dec. 1…..:-(

dwcourse December 17, 2011 at 12:49 pm

If you are talking about the site at then the menu doesn’t change with the resolution, it’s flush to the left of the table.

Haylee Watson December 13, 2011 at 12:43 pm

I have set the width on the spry menu bar on my dreamweaver site to the appropriate width. It shows correctly on dreamweaver itself, but when viewed in internet explorer, the width is not correct, and the alignment of the spry menu bar is aligned to the left. I have used several codes for setting the width, but none seemed to work. I have adjusted the width on the ul.MenuBarHorizontal and the ul.MenuBarHorizontal li, but the changes do not save on the internet.

dwcourse December 17, 2011 at 12:50 pm

I can’t really offer any suggestions without the url of a page where I can see the issue.

yunlu18 November 1, 2011 at 9:50 am

I love the tutorial but you didn’t explain how to fit a gif correctly into a menubar.I tried several times but failed.where to change the picture and what is the size of gif

dwcourse November 1, 2011 at 9:55 am

Placing an image into the built-in Spry menu bars is problematic. While it’s possible, they are set up to use text links and don’t accommodate images without a lot of customization.

Tam October 30, 2011 at 1:10 pm

Hi, I have a spry menu in a site I am completing, but my client wants me to get rid of the hand pointer cursor on the top level links, ie “Business Drivers, EIM Components & About Us” as they do not actually go anywhere. I have tried fiddling with the CSS but am having no luck.

dwcourse October 30, 2011 at 1:27 pm

I don’t usually recommend inline CSS but in this case it makes sense. Add the CSS rule cursor:default to the “dead” inks:

<a class="MenuBarItemSubmenu" style="cursor:default" href="#">Business Drivers</a>

wayne selmes September 29, 2011 at 1:23 am


i am currently having a conflict between IE and FF.
everything displays fine in IE but in FF the submenu seems to be stacked ontop of each other rather than in a full verticle list. i know its to do with the widths etc but ive plyed with it for nearly 2 days and still having issues. any chance you can see what is causing the issue?


dwcourse October 3, 2011 at 3:16 pm

There are other issues on that page and the use of an iFrame in that way isn’t really a good practice. But the issue at hand appear to be the way FF includes the width of the border of a table. Basically you choice is to either reduce the width to the

  • tags in your menu or increase the width of the enclosing table (to 750)
  • Bob Gair September 24, 2011 at 8:31 am

    Hi and thanks for being such a great resource for us struggling coders. I have a simple spry menu bar on the site provided. Doesn’t even have drop downs. All is well in Safari and Firefox but as usual Explorer has an issue. I can’t seem to vertically centre the test in the menu boxes in Explorer. Seems like it should be a simple thing. I’m out of ideas and could sure use your help.

    dwcourse September 26, 2011 at 4:04 pm

    Vertical centering using CSS is problematic. In spry menus you can adjust the padding-top property in the link tags to adjust the position of the text link.

    Korina August 28, 2011 at 12:18 am

    The issue I’m having can be seen on the site in the about tab.

    I’m trying to do a image dropdown but there is padding in between the images that are nested in the , I keep messing with it but I can’t seem to get it to stop. Any guidance?

    dwcourse August 29, 2011 at 10:25 am

    Korina discovered the solution without my help and passed it along for others facing the same issue:

    /* added so the images don’t space */
    li img {
    display: block;

    brandon August 25, 2011 at 6:10 pm


    I’m having trouble with my dropdown menu. It’s not online btw. I have four categories in my menu but it seems that they are all overlapping and so all I can see is one menu item.. I have no idea what I adjusted incorrectly in the CSS rules but I’m really frustrated … Is there anyway to just reset all the CSS to default. Anytime I try and insert a new spry menu it comes up the same … really really frustrating. any ideas?

    dwcourse August 25, 2011 at 9:17 pm

    The default menubar files (including the CSS file) can be found in the following folder (this is for Macs, it should be similar on a PC):

    /Applications/Adobe Dreamweaver CS5.5/Configuration/Shared/Spry/Widgets/MenuBar

    You can make a copy of the css file from here and replace the one you’ve messed up while editing. Be careful not to edit or accidentally move the files in this folder or you’ll break the Spry menubar functionality.

    Jenny August 18, 2011 at 3:24 pm

    I am building a website right now and am having difficulty with my spry menu. It is working great for the most part, but I have a gallery menu item that has submenus that is giving me trouble. If I go to any of the submenus (photo gallery, audio gallery, video gallery), I can no longer hover over the Gallery menu item in my spry menu bar to get the submenu to drop down. Since it won’t drop down, I cannot navigate between the different submenus without going to another page on the site in between. How can I fix this?

    dwcourse August 18, 2011 at 3:33 pm

    Jenny, in order to help I need to see the page. Can you post a link to it?

    Doug August 12, 2011 at 6:03 pm

    Hopefully there is a simple quick fix to my problem.
    I have installed a Spry menu bar using CS5 DW, the menu is no OK after lots of mucking about for IE. My problem is that below the menu bar I have an image inserted in a table cell. The gap between the menu bar (without drop downs) is too much. I would like the image much closer to the bottom of the top line of the menu bar. Do not care if drop down menus appear over the image. I have tried setting borders and margins all over the place, not sure if the issues is with the menu or the table. In either case, problem the same, gap too big.

    Can you help?

    dwcourse August 13, 2011 at 12:08 pm

    Re: the site at

    Working with tables is going to cause you no end of problems eventually. If you’re serious about creating website, you’re going to need to learn to use divs and CSS styling.

    To address you immediate issue, The list items

  • in a Spry menu are floated left which means they are removed from the flow of the page. So they do not affect the position of object that appear after them (although the contents of those objects will wrap around the floated items). To make the objects after the menu drop below the menu you can insert a line break with the CSS style rule clear:left or clear:both applied like this:

    That’s what’s known as an inline style and it’s generally not the best practice. Ideally you would write a style rule and apply it to the line break. That way you could also add a height to the line break to affect spacing.

  • Rajesh Biswas August 17, 2011 at 6:27 am

    There are 2 spry menus in all of my pages in the web site The menus and submenus are displayed correctly in the firefox and ie7 but in ie8 the 2nd menu’s submenus are displayed wrongly. There is a huge gap between the menu and submenu.

    Pls help to solve this problem.

    dwcourse August 18, 2011 at 3:48 pm

    This won’t solve all your issues but you’ve changed the position property in the ul.MenuBarHorizontal_1 ul style rule from absolute to relative. I don’t know why people change the position properties in the Spry CSS but it’s a popular error. So the first step is to change it back. And, btw, you might want to take a look at The Ten Commandments for Editing Dreamweaver’s Spry Menubars

    Dihanna August 8, 2011 at 6:21 pm

    Greetings – I’m just starting with CS5 for our high school pages. I want to incorporate a spry menu (horizontal) … I’ve got it mostly done but how do I use that same menu in all of the other pages?


    dwcourse August 13, 2011 at 12:09 pm

    Sorry for the slow reply. the best thing would probably be to place the menubar in a template and then use the template to build the rest of your pages.

    Bo July 27, 2011 at 11:34 am

    i’m making a website, and the issue is I want my spry bar to move down the page as I scroll down, but thats not happeninf. Would you know how to do that?

    dwcourse July 27, 2011 at 11:41 am

    To make an html object that stays in the same position in a browser window you need to use the CSS position:fixed property. Try applying it in the ul.MenuBarHorizontal or ul.MenuBarVertical style rule. If that doesn’t work you might try wrapping the whole menu in a div that is positioned with the position:fixed property. Here’s some info:

    Rushi July 13, 2011 at 5:20 am


    I’ve inserted a Spry Horizontal Menu Bar and floated it to the right. It works great but for one thing. Somehow, it is pushed a little down of the header and leaves an indent in Firefox, Opera and IE. Although, it is displayed correctly in Dreamweaver Live View, Google Chrome and Safari.

    No help from Adobe Forums also.


    dwcourse July 13, 2011 at 9:17 am

    It’s hard to diagnose a problem without a link so that I can look at the page and see the issue. you should be aware that Live View, Chrome and Safari all use the Webkit rendering engine. So they (almost always) display thing the same. IE and Firefox use different rendering engines (and IE changes drastically from version to version). Based on that, I’d guess you have a fairly simple CSS issue.

    Ron June 22, 2011 at 1:44 pm

    I can not get my Spry horizontal menu to change colors for mouseover. It was doing it properly before, but I reset everything back to original settings while troubleshooting a bigger problem which I have solved. All css settings are standard except for colors, so I think there is something in the html that is messing with it. I have tried commenting most everything except the menu out, but it still didn’t work. You can see the page here: . The other pages besides the home page use a template that is currently acting the same as the index page, so if I can get the index page fixed I should be able to apply the same fix to the template for the other pages. Thanks in advance…

    jcook June 22, 2011 at 2:13 pm

    Look for this rule in your style sheet:

    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #FBD663;
    padding: 0.5em 0.75em;
    color: #5F1C2E;
    text-decoration: none;

    It appears you accidentally deleted the closing } (bracket) from the rule definition. Add it after “text-decoration: none;” and it should fix things.

    Ron June 23, 2011 at 6:09 am

    Thanks! I was hoping it would be something stupid like that. At one point I was going to replace the entire file with the original css, then just change the colors again. I guess that would have done the trick.

    Thanks again for your help!


    Bill June 10, 2011 at 10:27 am

    I’m just starting the home page design of a new site and running into a problem with my Spry horiz nav bar. It pushes the whole header down about 20 px and I can’t figure out why.
    Here is the page with the Spry bar:
    Here without nav bar:

    jcook June 10, 2011 at 10:35 am

    Fortunately, that’s an easy one to start my day. You need to add a margin-top:0 to the ul.MenuBarHorizontal rule (or since left, right and bottom margin are already set to 0 simply replace all the margins with margin: 0

    Bill June 10, 2011 at 2:17 pm

    Hey J,
    That worked. You’re one for one!
    Now, how can I position the menu lower in the header without the same problem cropping up?

    jcook June 10, 2011 at 2:30 pm

    I think you can add a padding-top: 20px or whatever you want. What you’re running into is where the margin of an object (in your case the

      ) within an object that has no margin (your header div) spills outside its parent container. There are reasons for it but it’s very confusing.

    Bill June 10, 2011 at 3:28 pm

    Awesome! You are 2 for 2. I could have sworn I tried that (and 100 other things that didn’t work!)
    I’m really impressed and grateful that you take the time to help the confused and frustrated folks like me who are lucky enough to find this site. Thank you very much!

    Charles June 2, 2011 at 4:23 pm

    OK, new issue. Menu seems to work in IE and all platforms. Third item on menu (ABOUT PPY) is not behaving right. You have to work the mouse around all over the place. THis is in Chrome & Safari but I’ve heard similar from my windows testers. What gives?

    jcook June 3, 2011 at 7:00 pm

    The problem doesn’t appear to be with the menu but with a div generated by (I believe) your image rotator. Theres too much going on in the page for me to debug it.

    Charles June 6, 2011 at 5:03 pm

    Fixed the margin in the ul.MenuBarHorizontal tag to 4. Problem solved!

    Charles June 1, 2011 at 10:37 am

    Greetings! I am desperate!

    My new site is in its final stages but for one vexing issue. See the site here:

    The menubar is horizontal across all browsers & platforms except for IE. I’ve removed every trace of SpryMenuBarVertical but for some reason my IE betatesters tell me that it’s still showing up vertical when it absolutely has to be horizontal. I’m not a programmer and reading the .css files line by line yields no clues.

    I am desperate. We’re supposed to go live today and I can’t seem to solve this issue. Please help me.

    Thank you.

    Charles Terhune

    jcook June 1, 2011 at 10:50 am

    I suspect the problem is with this rule:

    ul.MenuBarHorizontal li.MenuBarItemIE {
    background: none repeat scroll 0 0 #3B517A;
    display: inline;
    float: none;

    Try deleting the float:none rule. The float (which is in a previous rule) is required to make the list items in the menu line up across the page. By setting it to none here they go back to being stacked vertically.

    Charles June 1, 2011 at 11:27 am

    I took that out and reposted the page. None of my beat testers are available. Hate having to wait for someone with a WIndows machine to look at it. Ugh.

    Charles June 1, 2011 at 11:28 am

    Okay so a betatester says it fixed the horizontal/vertical issue but now the dropdowns don’t work. Got an idea?

    Charles June 1, 2011 at 11:30 am

    Also thank you so much for running this site. THis has saved my hash big time. You are my CSS savior!

    Dwcourse June 1, 2011 at 12:21 pm

    Actually, I may have been a bit premature in my guess. I just noticed that you have Spry version 1.4 installed in you version of Dreamweaver (I assume CS3 or CS4). I recommend you update using the updater at

    Unfortunately I believe you’ll also need to rebuild the menu. You might also want to look over the tips at before starting.

    Charles June 1, 2011 at 2:46 pm

    Argh! This would be the third rebuild! But if that’s what it takes to work!

    I did update it just now and cleaned up some messy code that was in there. Mind having another look before I got to all the trouble to rebuild the menu?

    Charles June 1, 2011 at 12:40 pm

    OK, seems I spoke too soon. THe menu’s now do not work in Chrome, Safari, FF, or IE in Windows. Any suggestions?

    Dwcourse June 1, 2011 at 2:56 pm

    When I said rebuild the menu I was speaking too broadly. The HTML of hte menu should be fine. You will only need to redo the CSS.

    Mark May 12, 2011 at 6:40 pm

    I’m working on a website for my school and have a small issue of the spry menus bouncing my page around over one of the menu items: “local forecast”. What can I do to stop this? Also, in older versions of explorer, the menus cause the pages to do the same thing, but even more extreme. Any help?


    jcook May 12, 2011 at 7:34 pm

    I’m sorry to say it but you’ve got more issues with that layout than just the spry menu. The way you’ve used divs, positioning and margins is going to cause you problems eventually (if it hasn’t already). And there is absolutely no reason to change the positioning properties or add divs within a spry menu. I’d recommend you read The Ten Commandments for Editing Dreamweaver’s Spry Menubars at and start the menu over.

    Monica Andersson May 10, 2011 at 4:03 pm

    I have made a page with DW CS4 and spry menu bar, horisontal. In Internet Explorer the menu disappears and end up further down on the page and the place where the menu should be turns out white. What have I done wrong? The page is correct in for example Google Crome.
    The page is

    I hope that you can help me


    jcook May 10, 2011 at 5:24 pm

    The only thing I see in your CSS that looks to be a problem is this rule:

    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #093;
    color: #FFF;
    left: 0px;
    top: 110px;

    The left and top properties don’t make sense there. Try deleting them.

    Monica Andersson May 10, 2011 at 5:48 pm

    I don´t know how to thank you for this!! After deleting these two the menu is working perfect!

    Thank you so much! This means that I can go to bed now and get some sleep. It is almost one a clock in the morning here in Sweden.

    Thank you so much!

    jcook May 10, 2011 at 7:43 pm

    You’re welcome and god natt!

    Aaron May 1, 2011 at 12:55 pm

    I have dreamweaver cs5 if I create a new site and new html page insert a horizontal spry menu don’t change anything and preview it in IE 9 the menu does not drop down, so I can not see the submenu. Any ideas? I am building a site and ran into this problem. But if it does it to a new unedited file then… also in firefox 4 it drops down but is displayed about an inch to the right, where opera, and safari are normal… thank you in advance!

    jcook May 2, 2011 at 11:30 am

    Can you post a link to your page?

    Maria April 14, 2011 at 6:34 am

    I need help with this: My spry Asset won’t work on the live site.

    i upload the site originally to:
    The site works fine here.

    Then I uploaded the site to
    and the spry assets don’t work.

    I need to know why.

    jcook April 14, 2011 at 7:47 am

    Your Spry menu is working for me at You have other layout issues that are affecting your page in Internet Explorer. But the menus work fine.

    kdp March 10, 2011 at 12:43 pm

    I am using the spry drop down menus. The menus are great. However, the menus appear at the top of the page and part of the menu appears to the far right of the page. The number of menu columns visible to the far right depends on your screen settings. What can I do to remove the menu to the far right?


    jcook March 10, 2011 at 5:05 pm

    Do you have a link for the page you are working on?

    kdp March 10, 2011 at 6:52 pm

    It’s happening on all of the pages that I built.

    Dwcourse March 10, 2011 at 7:18 pm

    I didn’t scroll far enough right to see what you were talking about; Somehow you dropped the minus sign in the left property in the ul.MenuBarHorizontal ul. Put it back in (left: -2000px;)

    ul.MenuBarHorizontal ul {
    cursor: default;
    font-size: 10px;
    left: -2000px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 125px;
    z-index: 1020;

    That rule places the submenus off the left side of the page until they are needed (when a main menu item with a submenu is hovered over). By deleting the minus sign you placed the submenus 2000px to the right and the page extended to hold them.

    kdp March 11, 2011 at 12:06 pm

    Thanks! This solution fixed the problem. Quick question — What is the internet standard for building web sites today? 800×600, 1024×768 ?

    Dwcourse March 11, 2011 at 12:40 pm

    I’d say 1024×768 which is why most sites are built at about 960-px wide (allows for scrollbars, etc.).

    Jen March 4, 2011 at 10:57 am

    Can you please let me know how to fix a horizontal spry menubar that is rendering as a list and not with the attributes that it should.

    any direction would be greatly appreciated! thanks.

    jcook March 4, 2011 at 11:21 am

    In your case it’s because the page can’t find the style sheet which, according to your link to it, should be at But that link actually results in a Page Not Found error.

    So, either you didn’t upload the style sheet or it’s been uploaded to the wrong location (possible because your site information isn’t configured correctly).

    Candice February 22, 2011 at 12:39 am

    I’m using the horizontal spry menu for my project and I’ve managed to resize the items to fit equally across the width of the page. The problem is the mouse over effect is extending outside the borders on the submenu items which is tacky and driving me crazy. Can you tell me what I did wrong?

    jcook February 22, 2011 at 9:30 am

    It’s hard to be sure without seeing the page itself (feel free to post a link) but I’d guess that you need to make sure that ul.MenuBarHorizontal ul (the entire submenu) and ul.MenuBarHorizontal ul li (the list items in the submenu) are set to the same width. Another possible issue coud be that you have set a width in the actual link (a) or hover (a:hover) style rules which you should avoid.

    shravan February 2, 2011 at 6:15 pm

    Thanks JC for all the support..
    I am using SpryMenuBarHorizontal in my site.The text in the menu tabs are of different lengths.So I have increased the height of the tabs to accomodate the lengthiest text. I have fixed widths of the tabs(for look and feel).
    Now the tab with the smallest text is verically aligned at the top of the tab.I need all the texts in the tabs to be vertically aligned to middle.I have tried using valign in ul.MenuBarHorizontal ul, ul.MenuBarHorizontal a.But it doesnt work..
    I am struggling for the same task for past 4 days.Can you please tell me a solution to make the vertical alignment of the text in the tabs to middle.
    Thanks in advance.

    jcook February 4, 2011 at 8:31 am

    Sorry to be slow to respond. If you still have the issue, can you provide a link so that I can check it out?

    shravan February 10, 2011 at 4:25 pm

    Thanks for the reply.
    This is the site i am talking about.
    Can you please look into the issue..

    shravan February 14, 2011 at 10:38 am

    Hi JC,
    I am desperately looking for the solution.Can you please look into it ..

    jcook February 14, 2011 at 11:05 am

    What you’re asking seems like a simple thing but, with CSS, it isn’t. My best suggestion would be to create a special style class that adds top padding to each single line link and then apply the rule to only those links:

    ul.MenuBarHorizontal a.singleline {
    padding-top: 1.5em;

    Nick January 16, 2011 at 1:59 pm

    How can I edit the colour of an active submenu item? Thanks for your help

    jcook January 16, 2011 at 2:17 pm

    If you are talking about the active state (while the link is being clicked) of a submenu item you need to add a rule:

    ul.MenuBarHorizontal ul a:active

    The second ul in hte selector means it will apply to link is submenus and sub-submenus

    If you’re after something else, let me know.

    Nick January 16, 2011 at 4:44 pm

    my bad, i was referring to the current state. When I am on submenu page i would like that submenu item to be a different colour. I went ahead and tried what you had suggested except swapped “a:active” with “a.current” and nothing changed. I also tried that plus applying the “current” class to the list item i wanted to be affected by it, and it just added a giant top-margin which i am guessing it inherited from the main menus attributes. Any suggestions would be appreciated. Thanks again

    jcook January 16, 2011 at 5:48 pm

    Check out these two posts:

    Highlight the Current Page in a Menu with CSS at

    and Highlighting the current page in a Spry menubar on a template-based page at

    Nick January 16, 2011 at 7:48 pm

    Found what I was looking for in there. Thanks a lot

    DRutledge January 5, 2011 at 7:06 am

    I have created a very nice spry menu in Dreamweaver CS4 and in firefox and Chrome it works and looks great but in IE the all the boxes appear on the right side of the screen, I have uploaded all the spry folders but cannot figure this one out. Here is the link.

    Any help would be appreciated


    jcook January 5, 2011 at 7:41 am

    At the end of the CSS styles you have changed the position property for the submenu to postition:relative. Change it back to position:absolute:

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;

    As a general rule you should not edit the position property anywhere within the Spry menubar CSS.

    DRutledge January 5, 2011 at 10:10 am


    Thanks for your response, I did what you said and it didnt make a difference the dropdown boxes and rollover images are still way off to the right. Any other thoughts?


    Dwcourse January 5, 2011 at 10:36 am

    Sorry, but nothing jumps out at me. It’s very hard to diagnose issues in a heavily modified Spry stylesheet.

    One thing I do see, there is no relative option for background-position (ul.MenuBarVertical a.MenuBarItemSubmenuHover rule) but that shouldn’t affect things.

    My first guess would be one of the rules affecting the submenu when it becomes visible (check the comments in the style sheet for indications of which rules that might be).

    It’s not what you want to hear but, often the quickest way to diagnose an issue like this is to start over, and insert replace the default rules with the new ones one at a time and check the page after each substitution. Once you find the problem rule, it should be easy to fix.

    Stephanie December 30, 2010 at 5:34 pm

    hey,so ive created a spry orizontal menu bar, and one of them has a submenu, which then has three more submenus. When i look at them through the browser( i have IE), i only see the main menu bar, not the submenu (or its children). Can you please help.

    jcook December 31, 2010 at 10:16 am

    My best guess would be that you changed the default position property in one of the CSS rules for the menu. You should never edit the position property in a Spry menubar (see The Ten Commandments for Editing Dreamweaver’s Spry Menubars at ). But, without a link where I can view your site, it’s impossible to give you a definitive answer.

    Dan December 20, 2010 at 4:24 am

    I updating my website and i’m having major issues with my template & horizontal Spry menu. The spry menu is in a header which is within an editable region. I need to make the header none editable or outside the editable region so I can update the spry menu on the 100 pages I have built at once. I don’t know what to do as everything I try just changes the entire layout. Can you please tell me how I can somehow update my template file to give me the ability to update the spry menu. I have tried moving the header outside the region but the I will have to then edit 100 page layouts. Is there a way I can restructure the editable layout to exclude the spry menu? thanks

    jcook December 20, 2010 at 6:55 am

    If you have content within an editable region on a page the only way to remove it is on a page by page basis. If you move it on the template then you’ll have two versions of it on your pages until you edit them individually. However you could probably remove the menu from all pages with a find and replace. Just be sure to construct it carefully and backup your site before doing it.

    Sean December 12, 2010 at 12:11 pm

    I created a spry vertical drop down menu with dreamweaver CS4 and I have problems for keeping spry drop down submenus visible:
    Now I would like to keep the submenu items visible on the parent-page. When I click on menu, submenus show up, and when I click on one of the submenus, the page loads but the submenus are hidden again. I would like them to stay visible and let the item that I clicked be highlighted as active. I think all submenus should stay visible as long as the user is on that page. I wonder how I could keep spry menu drop down submenu to be visible on the page.
    I’m not able to proceed to next level without having your comments.
    Thank you in advance for any help.

    jcook December 31, 2010 at 10:17 am

    Sorry, I really don’t understand what you’re trying to achieve. If you could provide a link to your page and a better explanation, that might help.

    christy November 5, 2011 at 8:57 am

    Did you ever get a answer to your question about keeping the submenu visible so items don’t all hide every time one is clicked? I have been scouring forums to try to solve this problem. Every time I see this question in a forum it remains unanswered.
    Thanks to anyone who can help.

    dwcourse November 7, 2011 at 9:20 pm

    Christy and Sean, sorry but I don’t believe it’s possible to do what you’re asking with a Spry Menubar. The only way to activate a submenu is with a rollover on the top level menu item. I’d suggest you search for a jQuery based solution.

    mina November 22, 2010 at 12:42 am

    I created a horizontal spry menu that has several top-level items with submenus under them (by Dreamweaver cs4). Whenever you hover over a top-level item, the submenu appears properly below it and stays visible as long as you keep the mouse hovering over the top-level item. However, as soon as you click on one of the submenus, all of the submenus disappear. In other word after clicking on one of the submenus, immediately submenus close!!! Submenu should not be closed (or disappeared) automatically and I would like that all submenus remain visible until I click on another menu. For example one of the top-level items is PUBLICATION which has several submenus like: BOOK, JOURNAL, WORKING PAPER. Whenever you roll over on PUBLICATIONthese three submenus will be appeared, however as soon as you click on BOOK the related page will be shown, but these three submenus disappear. All these three submenus should stay visible as long as the user is on that page (publication). How should I keep submenus visible even after clicking on them? I have no idea how to do this…
    I appreciate for your time and consideration.

    MWeiler November 5, 2010 at 12:59 pm

    I am using spry horizontal menu and I am having problems with the CSS. I need to set different size menu buttons in the main bar because the menu text amount varies. For example the shortest button text is “About us” and the longest is “Our Lady’s Shrine” but if I set the width to auto so it self adjusts to the different amounts of text then the menu becomes really short. I would just like to set About Us to say 5em and Our Lady’s Shrine to 9em. I have tried to create a new style and apply it to the different size buttons but it just doesn’t work for me. I am sure I am doing something wrong but not sure what. Also I would like to change the background color of the dropdown submenus to #fff and I thought I could do that by adding the background color in the ul.MenuBarHorizontal ul li but can’t get that to work either. If you need the link to the page where I have my menu it is – I could really use some advice.
    and the

    jcook November 5, 2010 at 1:25 pm

    I would try setting the width of the buttons to “auto” in the ul.MenuBarHorizontal li rule and adding left and right-padding of the links in the ul.MenuBarHorizontal a rule.

    The color of the “button” is determined in the link (a) rules so, to change the submenu color you need to add a new rule:

    ul.MenuBarHorizontal ul a

    Adding the second ul forces the rule to apply only to submenus. You’ll may also need to add rules for visited and hover states.

    Michelle November 8, 2010 at 7:30 am

    Thanks for your quick reply. I have applied the width to auto and the left and right padding and that seems to work. I am still having problems with the background for the submenus. I did as you suggested by adding a new rule – ul.MenuBarHorizontal ul a – and added that class to the ul for the submenus

    About Us

    Then my submenus don’t show up at all. Am I applying it to the wrong ul?
    Thanks for any help.

    jcook November 8, 2010 at 6:31 pm

    You shouldn’t need to add a class to anything after you create the ul.MenuBarHorizontal ul a rule. It will apply automatically to submenu links.

    Barb November 5, 2010 at 8:14 am

    ARGH!! I created a Spry menu bar and it looks great on my computer – HOWEVER when I view the actual page I get the list view only. For the life of me I can’t figure out how to make it look normal. I checked it in both Safari and Firefox.

    jcook November 5, 2010 at 8:24 am

    My first guess would be that you didn’t upload the files from the Spry Assets folder (the CSS, Javascript etc.). My second thought would be that you’ve somehow linked to them improperly (which can happen if you’ve set up your site incorrectly).

    mikew November 4, 2010 at 8:08 pm

    Spry menu bar for cs4 – I have been trying to change the color of the submenu buttons only including the hover color … everytime I change them the main link buttons change to the color I’m specifying in the sub. menu? and it also seems that the buttons with the downarrow gif for example will also inherent the same colors if I change the sub menu buttons..
    Hopefully you can assist me.. thanks.

    jcook November 5, 2010 at 8:28 am

    That #10 of my Ten Commandments for Editing Dreamweaver’s Spry Menubars (

    10: Verily I say unto you, a new style shall appear to define the appearance of submenus.

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

    If you want to change the hover state for submenus, you’ll need to add ul.MenuBarVertical ul a:hover or ul.MenuBarHorizontal ul a:hover as well.

    HAnnah October 29, 2010 at 5:59 am

    The links etc are all in the Html, Is there a way of putting the list into an external file?

    jcook October 29, 2010 at 8:06 am

    You can move the links to an include file. However the use of server side includes requires that your server support ssi (server side includes) and that your file end with the .shtml extension or php with your file ending with the .php extension (rather than .html).

    mina October 22, 2010 at 6:01 am

    Please let me know how to change the background color of submenu in spry horizontal menu bar (in adobe Dreamweaver cs4).
    thank you

    jcook October 29, 2010 at 8:17 am

    This is #10 of my Ten Commandments for Editing Dreamweaver’s Spry Menubars at

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

    mitra October 18, 2010 at 3:24 am

    Thank you for running such a useful course. but i have problem with arrows of menu bar in horizontal spry menu bar. I’m using adobe dreamweaver cs4 but I don’t know how i can change the color and place of arrows in menu bar (horizontal). we have arrows usually after the items in default, but i want to know how i can change the place it to before item. Also i want to change the orientation of arrows. For example for those menus withthout any submenues i prefer to use right pointing arrows (before menus) and for menus with submenus, using downward pointing arrows (before it). And how i can change the color of arrows to red.
    I appreciate if you can help me, and thanking you in advance.

    jcook October 29, 2010 at 9:04 am

    To change the color, shape or direction of the arrows you’ll have to edit the arrow image files which Dreamweaver places in the Spry Assets folder.

    To change the location of the arrows edit the 4 rules in the SUBMENU INDICATION section of the style sheet. Here’s one of the four rules:

    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;

    In background-position the first number is the horizontal position so to move it to the left of the text you’d want a low number like 5% or 10% you may also have to adjust the left-padding on your links to make room for the arrows.

    rebecca October 15, 2010 at 12:15 pm

    Thanks for your response. Yes, I’ve figured most of my problems out largely by avoiding certain things. In my attempt to make the last menu item a different color (#FCO), per your suggestion, I added a class (.menubillpay) to my SpryMenu CSS. Then I applied that class to the text. It is not working and I have uploaded both the page and the updated css. What do I need to do to make this item a different color? Does it have something to do with it being a link ?? TY for your help. -R

    jcook October 29, 2010 at 9:06 am

    Is there somewhere I can look at your page?

    jcook October 13, 2010 at 6:48 pm

    Instead of an actual link you can use a link that cancels itself like this:


    You’d need to do it in the code though. And the submenu will still open on hover. To change it to opening on a click would require editing the javascript which I don’t recommend.

    Ayoola Adeyanju September 27, 2010 at 5:03 pm


    I created an horizontal menu bar in CS3. It looked ok when I previewed it in firefox but as soon as i uploaded it via ftp, every item on the menu bar flushed to left. I can’t get it to straighten out. What am I doing wrong?

    jcook September 27, 2010 at 5:40 pm

    I’m betting it’s because you didn’t upload the dependent files for your page, specifically the files in the Spry Assets folder.

    Tim Pollard September 9, 2010 at 9:57 am


    Thank you for running such a useful resource.

    I have a problem I was hoping you might give me some advice on, where a border I have applied to the left side of my parent menu items also appears on the child menus. To get my left border on the parent I used:
    ul.MenuBarHorizontal a
    border-left-style: solid;
    border-left-color: white;
    border-left-width: 1px;
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #fff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    I thought if I redefined the border to zero on the child menus it would fix the problem, but it insists on giving me a white keyline down the left edge of the whole dropdown.

    Can you shed any light on why, please?

    Thanks again


    jcook September 9, 2010 at 10:29 am

    Normally doing what you suggest (as below) would work.

    ul.MenuBarHorizontal ul a
    border-left-style: none;
    border-left-width: 0;

    If that doesn’t work, can you post a link to your page and I’ll take a look?

    Tim Pollard September 9, 2010 at 1:06 pm


    Thanks for the reply.

    That’s fixed it – I needed to add in the ul.MenuBarHorizontal ul a

    I was obviously trying to fix it in the wrong class.

    Many, many thanks!



    jcook September 9, 2010 at 1:11 pm

    Glad it worked. The extra ul insures that it only applies to lists within lists, in other words submenus.

    natassa September 5, 2010 at 5:59 pm

    Thank you so much! Very usefull advice and tips!

    One question (must be silly.. but i cannot solve it..): my Spry meny bar background appears nice and transparent in Firefox, but opaque in IE. I have put a .PNG semi-transparent image as background for the menu.
    I tried the ‘filter’ in the CSS properties, but i must be doing something wrong..
    Any advice?
    (i am using dreamweaver CS3)
    Thank you very much again!

    jcook September 5, 2010 at 6:15 pm

    look in the BROWSER HACKS section at the end of the style sheet. This rule might be giving you a white background in IE:

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

    natassa September 5, 2010 at 6:39 pm

    that’s it!!amazing! you’re great! thank you so much! such an instant relply!
    I would never manage to track this bit of the code down there..!
    many many thanks!

    Beth September 1, 2010 at 5:22 pm

    I created a spry menu bar but my arrows indicating which menu items have sub-menus won’t appear. What do I have to change to make them show up?

    jcook September 1, 2010 at 7:15 pm

    Depending upon the background color of your links you might need to edit the arrow images to make them a contrasting color. Also make sure you uploaded them. And if neither of those ideas work, post a link to your page.

    Neda August 14, 2010 at 11:56 pm

    Thanks for your useful web,I wanna know how could I insert a spry menu bar which will not open when mouse moves on it.Actually I want my menu bar open when someone click on that.

    jcook August 15, 2010 at 10:05 am

    It’s probably possible with some major work on the Javascript code of the menu. However I think you’d be better off looking for another solution. Try googling “jquery menu” and see if you come up with anything.

    Carrie August 11, 2010 at 1:58 pm

    Hi, Great tutorial!

    I was wondering if it is possible to add different images for each buttons. I’m only seeing the option to add background image for all buttons. My client is very particular about the font used for the main menu and I need to use image instead of web fonts. Please help! thanks in advance.

    jcook August 11, 2010 at 2:49 pm

    You could simply replace the text of the links with images (although that won’t allow for the rollover. If you do that you’ll need to modify the rules associated with the link a bit to remove padding etc.

    You have two other options for linked images as rollovers (both of which might get a little messy inside the spry):

    Use the rollover image behavior

    Use a CSS rollover button (using the CSS background-image property. Here’s a video from my Dominate Dreamweaver course that will show you how to create CSS rollovers:

    Michael Shultz August 6, 2010 at 2:33 pm

    I am having the same trouble with my dropdown menus lining up side by side on IE. It works fine on all other browsers (safari, firefox). I haven’t set any of the margins to auto. Please let me know if you can help me.

    Thank you

    jcook August 6, 2010 at 2:45 pm

    I’d need to see the page.

    Michael Shultz August 14, 2010 at 1:05 pm

    the site is

    Dwcourse August 6, 2010 at 8:33 pm

    I believe the style rule ul.MenuBarHorizontal ul needs a width. I’d try 13em, the same at your submenu list items.

    jcook August 14, 2010 at 1:23 pm

    Did you try what I suggested? Adding a width to the ul.MenuBarHorizontal ul rule.

    ritam July 22, 2010 at 8:23 am

    @jcook, I use two spry menu horizontal in my home page. Both are working properly in all other browser except ie7. In ie7 the lower(2nd) menu bar shows perfect but the submenu under this menu appear at the top of the page. So I can not find the solution.
    It would be kind enough if you help me to solve this problem.

    jcook July 23, 2010 at 1:04 pm

    Generally, this is the result of changing one of the position properties somewhere in the style sheet.

    Vaibhav June 25, 2010 at 2:38 am

    I am using spry Tabbed panel and the height of the content on every page varies with each other. I cannot change the height of the containers of each tab individually. Please help me in this.

    jcook July 1, 2010 at 5:55 pm

    Not exactly a Spry menubar issue but from Adobe Labs:

    By default, the height of tabbed panels expands according to content. To set a specific height for panels, add a height property to the TabbedPanelsContent rule.

    Locate the TabbedPanelsContent CSS rule in the SpryTabbedPanels.css file.
    Add a height property and value to the rule, for example width: 300px;.

    Jenn June 13, 2010 at 8:01 am

    Great tutorials and feed backs you have here.

    I am changing the page properties to align center on the page upon opening at all times. Once I set it to center, the problem goes were the spry floats. I tried to embed / paste the spry into a table or a cell it won’t work to lock into a table with the rest of the links and copy. It’ll stay floating instead. How do I set the spry to move, expand with the page.


    Thank you in advance.

    jcook June 24, 2010 at 11:55 am

    As provided the Spry Menubars should stay positioned in a div or table cell unless you’ve modified it to be positioned absolutely (as you’ve done). You need to remove the position:absolute property from the ul.MenuBarVertical style rule. BTW, modifying any of the position properties in the provided style sheet is generally a bad idea.

    Diwakar June 11, 2010 at 2:10 am

    I have used a vertical spry menu bar using dreamweaver for my html pages. Now, i want the current tab visited to be highlighted in a different color. I have tried several things but m still unable to do that.. can u plz help??

    sizlaq June 4, 2010 at 11:32 pm

    Hello there!

    Im using the Spry Menu (horizontal) from CS4.

    Ive managed to put in roll over images instead of plain text over background, both for the menu and submenu.

    But this is giving me a hard time, as the buttons from the main menu dont have the same size in width and 50px height, and the sub menus have same width as parents but 20px height.

    So the question is if i could give an independent size for each menu and then another height for sub menus?

    Thanks for your time

    jcook June 10, 2010 at 3:40 pm

    It really depends upon how you inserted the images (whether they are image links or background images). If they are image links try setting your list item width to auto and don’t set a height (let the content determine it).

    Christine June 4, 2010 at 9:57 am

    I have added a horizontal spry menu bar to my page but can’t seem to get rid of the excess space between my header and the menu bar. Any suggestions? I’m working in Dreamweaver cs5

    jcook June 10, 2010 at 3:41 pm

    I might be able to help if you can give me a link so I can look at the page.

    Viv March 9, 2011 at 9:49 am

    Hi Christine, Have you fixed the issue yet? I”m having the same issue on Firefox, and I’m looking for solution to fix it. The horizontal spry menu bar looks perfectly okay with IE browers. I”m working in Dreamweaver CS4. Thanks!

    jcook March 10, 2011 at 11:03 am

    Viv, if you could provide a link to your page, I might be able to help out. The problem is probably an issue with margins but it’s hard to say. Margins can behave strangely at time. A margin on an object inside the header or other div can sometimes “flow out” of the div it’s in.

    Violet June 3, 2010 at 11:41 am

    I created and update three websites. I added a horizontal spry menubar to one of the pages (1) and would now like to add one to another site (2). When I try to add a spry menubar to the new site (2) it takes on the attributes of the menubar that I created for the first site (1) and changes I make to the new site (2) affect the first site (1). I do use templates for each of the sites.
    First Site:

    jcook June 10, 2010 at 4:09 pm simply forwards to so both pages are part of the same domain and website. Ideally, they would be create as completely separate sites. However if you want to have more different styles for the menus, you will need to make sure they have different ids. So the first would be

    MaryEv May 29, 2010 at 2:27 pm

    Thanks so much for all of the helpful information that you have posted here. I have created my first spry horizontal menu bar, and it looks great to me in Safari and Firefox, but in IE 8 the submenus are displaying horizontally, not in a vertical list. Can you help me understand how to fix this?

    My url is

    Thank you!

    jcook May 29, 2010 at 3:01 pm

    You’ve set the width in the ul.MenuBarHorizontal ul style to auto.

    Instead try setting it to 14em (or slightly more) to match the the submenu list items.

    MaryEv May 29, 2010 at 4:08 pm

    Perfect. Thank you so much!

    jmargo May 28, 2010 at 11:10 am

    I have created a horizontal spry menu in CS3 and set it to auto width. My issue is that the menus with drop downs the down arrows are now set under the text. I have tried resetting both the padding and the margins, neither seem to affect the placement of the arrow image.

    When the width is set to a fixed size the arrows show up to the right edge of the menu item. Items with a short name have a big space between them and the arrow and items with a longer name have the arrow close to the words.

    I appreciate any advice you can offer, I have done some searching on this with no luck – probably not calling it the right thing!

    jcook May 28, 2010 at 11:24 am

    The arrow is set as a background image in a number of styles listed in the SUBMENU INDICATION section of the style sheet. Here’s on of them.

    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;

    Since the arrow image is a background for the link, you’ll need to add some right-padding to the link style (ul.MenuBarHorizontal a) to get the arrow out from under the text.

    BTW, you should never add padding or margin to the list-items (

  • tag) in a Spry menu.
  • jmargo May 28, 2010 at 11:52 am

    Yay!!! Thank you very much for the quick response, the solution, the extra tip and your very helpful site!

    Jill May 19, 2010 at 5:15 pm


    I have created my first spry menu bar. I uploaded it onto one of our web pages as a test, but when I open it in any browser the dropdown submenus don’t appear. I tried in IE, Firefox and Google Chrome. Can you help? Thank you!

    jcook May 20, 2010 at 10:15 am

    To be honest, there are so many conflicting things going on in that page that I can really locate the issue.

    Ewan May 15, 2010 at 12:47 am

    Hi there!

    Love the site, it’s been a big help! I have a little problem with my spry menus in IE that I hope you can help me with. This is my site:

    As you can see in IE the sub menus appear completely detached from the rest of the menu… in IE8 the sub menus appears over on the right site of the main content. I’ve messed around for ages changing everything I can think of but I’m totally perplexed! I have the feeling it’s something simple taht I’m doing wrong, but I can’t figure out what! It works fine in firefox and other browsers.

    Really hope you can help. Thanks in advance!


    jcook May 20, 2010 at 10:14 am

    The first thing I would try is installing the Spry Updater Extension in Dreamweaver to get your installation up-to-date. Information is here:

    CK May 14, 2010 at 5:01 pm

    Great article
    I’m using DW CS3 and created the spry drop-down menu as identified on this page. I’m trying to modify the submenus by aligning the text to left and eliminating the red border it’s picking up from ul.MenuBarHorizontal. Any suggestions would be greatly appreciated.

    jcook May 20, 2010 at 10:06 am

    You’ll need to create a new style that applies only to submenus:

    ul.MenuBarHorizontal ul

    Notice the second ul in the selector. You can use the same technique to apply styles to only submenu list items or links as well.

    Sam May 5, 2010 at 1:47 pm

    Hi there,

    I am attempting to code the submenu in the 1st link provided so as to appear as illustrated in the 2nd link provided (ignore colour) – any hints?

    Cheers ;)

    Sam April 27, 2010 at 12:54 pm

    …and how do you create multiple link styles?

    Cheers ;)

    jcook April 27, 2010 at 11:17 pm

    BAsically you’ll have to create a class style rule for each style you want and apply the various styles to whatever links you want them to apply to.

    Madaz April 23, 2010 at 12:18 pm


    I have a Spry menu bar that just won’t center completely – I have set the width and also the margins to auto, but it looks to be approx. 1 cm to the left of center – this is doing my nutt in!! Please help!!!!

    Thanks in advance,

    jcook April 23, 2010 at 12:21 pm

    If you want help, you have to make it possible. Post the page with the problem and then come back and post the link to it here.

    Madaz April 23, 2010 at 12:25 pm

    The site isn’t live yet so I can’t get the page to you – is this what you meant? If so, might you have any suggestions?


    Madaz April 23, 2010 at 12:37 pm

    A hint might be that as I increase the menu width, it eventually bunches up and splits onto another line – as if I had page margins set, which I don’t. Bizzare. All I want to do is set the menu width to a particular px value, and have it perfectly centered. Hmmmmm


    DWcourse April 23, 2010 at 12:36 pm

    That’s what I meant. Isn’t there somewhere you can post it?

    Madaz April 23, 2010 at 12:40 pm

    I don’t think so, I am building a site for a client and I don’t yet have access to upload anything – ??

    Jacob March 7, 2010 at 6:11 pm

    After correcting several coding errors on our website, I found that we still have one issue remaining with the Spry Assests Horizontal Menu Bar on our website.

    When view in any and all browsers, it functions and works wonderfully except whenever viewed in compatibility view on IE8 as well as some older versions of IE. The Menu Bar seems to get split into two parts where one part is sectioned below the other and all the links and submenus refuse to work. Does anyone have any idea how to fix this?

    jcook March 7, 2010 at 7:39 pm

    Dreamweaver CS3 uses an older version of Spry (1.4) try installing the Spry Updater Extension:

    Read the info on the page. Installing the extension will give a new menu option in the Site Menu: Site > Spry Updater…

    You may need to reapply your menu customizations after updating.

    Jerry March 4, 2010 at 11:40 am

    First of all, excellent forum.
    I know NOTHING. So I started playing with the spry menu bar horizontal and… looks like I erased it after so many BAD changes. Problem is, it no longer exists in my DreamWeaver. Where can I get the default? I am so ashamed.

    jcook March 4, 2010 at 11:46 am

    If you actually deleted the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file from the SpryAssets folder you should should be able to recreate it by adding a new Spry menubar to a page within your site.

    Tara February 26, 2010 at 1:25 pm

    You are a bundle of AWESOMENESS!!! I have been looking for an article like this for ages. Thanks so much =]

    JDS February 24, 2010 at 2:51 pm

    I’ve created a spry menu bar and have been able to customize everything, but I’m having problem with the submenus, if I create them, they don’t pop-up, just stay “visible” or “on” all the time. Is this something I need to customize in the CSS as well?


    jcook February 24, 2010 at 2:55 pm

    Julie, is this when you preview in a browser (which browser) or just in Dreamweaver’s design view?

    Also can you post your page and give me the link so I can look at the code?

    Jeremy Fletcher February 19, 2010 at 6:41 am

    I love the spry menu bar but for some reason when I add categories in my bar they won’t retract back up even when I hover off of them? any explanation of how to fix this? thanks!

    jcook February 19, 2010 at 8:27 am

    Hard to say without seeing the page.

    Ben February 8, 2010 at 5:46 pm

    Hello and great forum,

    I am trying to give my spry menu children their own submenus. So the menu will have the intial drop down, then it’s children, and basically children within the children (so 3 pop outs)

    On Dreamweaver it doesn’t seem to give me this option. I hope this is possible to do??

    jcook February 9, 2010 at 10:25 am

    Dreamweaver’s Spry menubars only allow the main menubar and two levels of pop out submenus. If you need more you’r be better off looking for another solution rather than trying to force the menu to do something Adobe didn’t provide for. If you are comfortable working with a bit of code I’d do a search for “jquery menu” or “jquery pop out menu”

    Ben February 11, 2010 at 11:58 am

    Thank you sir! Strange they don’t just have it in the properties panel. It shouldn’t be too difficult to do through coding.

    Thanks again, awsome forum

    John Leo February 6, 2010 at 12:07 pm

    Hi, I am creating a webpage using Dreamweaver CS4. I have added an horizontal spry menu. I works very well in Chrome and Firefox, but in IE8 instead of displaying down it shows up as a row. Also, I’m using an alpha opacity which again, doesn’t work in IE8.

    I have read that other people experienced the same problem and tried the solutions they mention but they don’t seem to work for me.

    Here’s a link to my website:

    Can you help me?

    Thank you.

    jcook February 6, 2010 at 12:54 pm

    For the submenus, I believe you’ll need to add an actual value for the widths (pixels or ems) of ul.MenuBarHorizontal li andul.MenuBarHorizontal ul rather than “auto.”

    For the opacity my guess is that filter:alpha(opacity=100); should be set to 70 instead.

    John Leo February 6, 2010 at 1:23 pm

    Thank for responding so quickly. The opacity problem is solved. I tried actual values on the with option but wasn’t successful, the submenus still appear as rows in IE. I tryed fooling around with other values and found out that if changed the position value in ul.MenuBarHorizontal li to “static” I get the same response in chrome as in IE (submenus appear as rows) but haven’t found any value that fixes the IE problem. What else do you think I can try?


    jcook February 6, 2010 at 1:44 pm

    In looking at your style sheet the width properties are the only thing I can see changed from the default style sheet that I think would cause the issue. But you might try this:

    Save a copy of your existing style sheet and replace it with the default one that DW provides. If things work then (except for color, etc.) make your changes one at a time until you find the issue.

    jcook February 6, 2010 at 1:45 pm

    Oh, and one more thing, you never want to edit the position property in your menubar styles.

    John Leo February 6, 2010 at 3:01 pm

    Thank you very much for your advise, I did what you suggested and you were right, it turned out to be the width in the ul.MenuBarHorizontal ul.

    CRM February 5, 2010 at 12:48 am

    I made a Spry horizontal menu bar. I would like to put image slices created in PS in the main bar as main links and then have the submenus with normal backround color with hover colors. How do I put the image slices without having the same images in the submenu(s)? The reason I want to use the slices is I’m using a font (included in the slice) that is not a standard font.
    Would I be better off just putting the slices without text and then find closest matching font to put on top of the slices in the properties for the main bar, in order to have search engine friendly links?

    Please let me know soon.
    Thank you.

    jcook February 5, 2010 at 9:34 am

    The second idea with text (search engine friendly links is best but in either case you’ll probably need to style the submenus differently. By default the appearance of all hte links is governed by the rule ul.MenuBarHorizontal a (and similar rules for hover, etc.). To style the submenus differently you need to add a new rule ul.MenuBarHorizontal ul a (notice the added ul) which will apply only to links in submenus and overwrite the main menu rule.

    Aviva April 11, 2011 at 9:36 pm

    Hi there,
    I have been trying to do the same thing as CRM, as I created slices in Ai because I need that font and would like to put them as bg images in each menu and then hover over to replace that image with a different one. I have tried different things and nothing seems to work. I dont want to find the closest font for this particular project but is that the only way to go?

    jcook April 11, 2011 at 9:51 pm

    Spry menubars are really designed to be text. What you want to do is possible but difficult.

    You’d have to create rollover images (using the rollover image behavior) for each link which would be a mess.

    Or you could use the CSS Rollover technique for your links but that would require a custom style rule for each link – also a bit of a mess. And then you’d need to hide the link text as well.


    Gerard February 4, 2010 at 4:28 pm

    I’m starting a web page here:
    On the Links I want the sub menu to open under the main, it work fine with Chrome, Firefox, but with Explorer 8, the sub menu open on top, not under.
    Is is a way to change that? I did update to the last Spry.
    Thank you very much.

    cheryl February 13, 2010 at 4:42 pm

    I had this same problem myself in IE, the solution I found was to go in your properties for ul.menubarhorizontal ul ul and under ‘box’, change the margin width for ‘top’ to 10. You might have to play with it, depends on the height of your menu

    Terry March 17, 2010 at 8:10 pm


    I tried this and it didn’t seem to change the submenu placement.

    Is this where you said to make the change?

    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;

    My submenus are lining up at the top — but I want them to appear under the main menu.

    jcook March 17, 2010 at 8:50 pm


    The only problem I see with your style sheet is that you’ve apparently accidentally deleted a closing bracket at the very end of it:

    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;
    } /*insert this bracket */

    See if that helps.

    Nicole February 4, 2010 at 11:12 am

    I would like to create a spry horizontal dropdown but instead of text, I would like the dropdown menu items to be solely images. Is there a way to put only images into the spry fields? I’ve been poking around and can’t seem to figure it out. Thank you!!!

    jcook February 4, 2010 at 11:28 am

    There are a couple ways to do this. The easiest is to just insert images into the links where the text now is. You’ll want to set the padding, margins and borders on the links to 0.

    Nicole February 5, 2010 at 10:40 am

    Thank you! This worked great and saved me a lot of headaches!

    Mary Rose March 25, 2010 at 12:29 pm

    Do you know of a way in which I could switch out the image in the :hover state? I tried applying an id to each link and giving them :link and :active background images, but it’s not showing up. I only need to make this change for 4 out of ~20 menu items, so I don’t really want to get rid of the styling (color & :hover color) on the rest of them.

    Denis January 30, 2010 at 4:27 am

    Hi, How to change size of individual menu boxes, ie. “Home” 8em, “Travel guide” 12em. etc. Thank you in advance Denis.

    jcook February 3, 2010 at 1:29 pm

    You can set the widths of each link with a custom style class applied to each on or set the widths to “auto” but to be honest it leads to a lot of issues that are hard to solve.

    MJ January 28, 2010 at 1:18 pm

    How would I go about applying a separate image to each Spry Menu Bar Item, so that the banner can be seen through the menu items text? What I’m trying to keep are the effects attached to the text created in PS.

    Thank you.

    jcook February 3, 2010 at 1:28 pm

    If you remove the background-color and background image properties in your CSS style rules, you should be able to see whatever is below the menu.

    Stillings January 24, 2010 at 11:41 pm

    I’ve added a spry menu bar as a navigation bar in my website and I have a question. Is there any way to be able to update the menu bar globally so I don’t have to update it on all the individual pages? Thanks for the help.

    jcook January 25, 2010 at 9:06 am

    You can create a Dreamweaver template as the basis for your pages. then when you update the template the pages based upon that template will be updated as well.

    mcgurk January 21, 2010 at 4:47 pm

    Spry popup menu in IE8 moves far right. Works fine in FF, IE6, Opera… Any suggestions?

    jcook January 21, 2010 at 5:30 pm

    Post a link and I’ll take a look.

    mcgurk January 21, 2010 at 5:55 pm

    last try:

    Edit: It appears I may need to download a newer version of Spry. I am working on that now. Found the info at the following link:

    mcgurk January 22, 2010 at 11:18 am

    The newer version did not help. I have found a workaround so I can at least get the page onto the website. At the link above one suggestion is to add this after the tag.

    It causes the browser to use compatibility mode. Still need to find how to fix it correctly but this will help for now.

    mcgurk January 22, 2010 at 11:22 am

    The submit removed the meta tag in my comment above. Probably for security. Will try putting it in quotes and remove the brackets to see if it displays. “meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″/” If you use it, remember to add the brackets around it.

    mcgurk January 22, 2010 at 10:18 am

    It appears I may need to download a newer version of Spry. I am working on that now. Found the info at the following link:

    mmcgurk January 13, 2010 at 4:00 pm

    How do I change the border between each to white?

    jcook January 13, 2010 at 4:24 pm

    You can set a left or border-left or border-right property in the ul.MenuBarHorizontal a style rule.

    mcgurk January 21, 2010 at 4:56 pm

    Thanks for your prompt help!!! You are helping so many of us and it is appreciated!

    Steve January 8, 2010 at 11:07 pm

    Thanks for the site and your help!

    I have a spry menu bar just above a flash image viewer but the drop downs in the menu bar hide below the viewer. Is there anything I can do to get the drop downs to show above the viewer? Sorry, I don’t have my site up yet.

    jcook January 8, 2010 at 11:13 pm

    This note applies to a different menu system but it should also work for you:

    Pay attention to the info in the IMPORTANT NOTE FOR DREAMWEAVER 8, CS3,OR CS4 USERS section.

    Steve January 9, 2010 at 1:48 am

    It worked, thanks so much.

    I did have to fudge the insertion point a bit though.

    Al January 5, 2010 at 9:47 pm

    Can you advise as to what the property opr style is that governs the menu text when the item is actually clicked? Right now the text is changing color and growing somewhat which causes the whole menu bar to jump. I’ve been searching for this for a while and cannot find it.


    jcook January 5, 2010 at 10:24 pm

    you’d need to add a style rule for ul.MenuBarHorizontal a:active and possibly “active” rules for the various other link (anchor) related styles. Remember “active” active style must appear AFTER the related a and a:hover rules to work properly.

    George December 30, 2009 at 3:35 am

    I got this problem resizing the rectangles when hovering all of my buttons on the menu bar, does anyone know how or what is the name of the rule that can allow me to re size the hover rectangle when a mouse overlaps it to fit perfectly to my buttons, I wasted all day trying to figure this thing out, thanks in advance.

    jcook December 30, 2009 at 7:22 am

    It’s difficult to understand what your problem might be without seeing an example. Can you post the page and give me a link?

    George December 30, 2009 at 12:24 pm

    Sorry jcook, here’s a couple of images, what happens is when i click on the buttons on the menu bar that the rectangles appear with differences sizes, here take a look.

    jcook December 30, 2009 at 3:11 pm

    Try adding this property:
    outline: none;
    to the CSS rule for your active link state (a:active)

    for more info (at least for Firefox) check out:

    George December 30, 2009 at 6:16 pm

    wow, dude you are a life saver. It was that simple, heh
    anyways i appreciate your help….thank you

    John Lee December 3, 2009 at 12:23 am

    Ok here is a weird one. I have built my pages in Image ready and then deleted a slice from imageready and inserted the spry menu into this empty cell. I have it all working in Firefox, it looks great. In explorer I am told it drops down from the left side of the page and my other vertical drop downs on my vertical spry is mispositioned as well. I am on a Mac and can’t view from here what it is doing in explorer. My version of course is out of date because they don’t support Mac now.

    I am asking if you could go look at these pages and tell me how I can fix the drop downs for Explorer. The links are:

    I am afraid to go in and chnge the code myself cause everytime I change the imageready file I have to redo all the links and sometimes the spry menu gets screwed up. Thanks I have a client waiting toi view this site.

    jcook December 3, 2009 at 8:58 am

    For the page you’ve changed the style rule ul.MenuBarHorizontal ul.MenuBarSubmenuVisible. It’s important that you leave the left property set to auto.

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;

    I imagine it’s something similar on the second page as well.

    I hope you don’t mind a critical comment. If you’re offering web design services to clients then you really need to have access to a PC for testing your designs in IE6, 7 and 8. That’s what over half the people who visit the site will be using. Also you’re not doing you client any favors by exporting your site from ImageReady for a number of reasons:

    Your text is in images and will be unreadable by search engines not to mention hard to edit.
    Tables are not considered a good web design practice.
    Have you noticed what happens if a user resizes the type in their browser?

    It’s time for you to start mastering CSS styles and positioning.

    Edan December 2, 2009 at 4:54 am

    I have a slight problem with my horizontal spry in IE.
    on the 3 most right menus (recognizable by the arrows), when the submenu opens, i get an additional block to the right that says ‘false’, or just a small white block with IE8 when not in compatible mode.

    I’ve read about the option that it may be caused by an unused class attribute, but i didn’t find any.

    P.S, i hope the language difference is not an issue


    jcook December 6, 2009 at 5:14 pm

    Sorry to be slow to reply.

    I believe the issue may be that you have deleted a line from the following style rule:

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;

    Check your style sheet and make sure the filter:alpha(opacity:0.1); line is included.

    Linda November 24, 2009 at 5:58 pm

    Hey, so i have a problem,
    i put my website on the internet it is

    i made a menu bar in dreamweaver using spry. i inserted a picture in the background with round edges and made the background color transparent. my whole menu shows up with white around it as if the background around the image is white :(
    i thought this was just what dreamweaver did until i put the website online

    Please let me know whats going on

    jcook November 24, 2009 at 6:25 pm

    Not to be cruel but there are a number of issue on that page that make it hard to nail down what is happening. Without redoing the whole menu, you might try adding a black background color to the #MenuBar1 li style.

    If that fails, try adding it to the ul.MenuBarHorizontal style.

    And if that fails, try adding it to the table cell holding the menu.

    Beyond that I don’t have any suggestions other than starting over and being more careful with how you edit and created styles for the menu.

    jon July 27, 2010 at 9:34 am

    Hey, I had the same problem on this site My drop downs have transparent GIFs in them with a rounded edge at the bottom of each menu. To get them to be transparent I had to do the following:

    Go to the CSS rule:

    ul.MenuBarHorizontal a

    DELETE the background-color rule


    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

    DELETE the background-color rule

    This fixed it in all browsers except IE 8 of course… I’m currently looking for a fix for this.

    Linda November 12, 2009 at 7:57 pm

    hey everyone
    i dont know if these two things have been covered but i have two questions.

    1- i made a menu bar in dreamweaver using spry. i inserted a picture in the background with round edges and made the background color transparent. now on the sub menu bar i have a thin white box going around my sub menu. how do i make this border go away?

    2- in this same menu bar i have another problem. when i look at it in live view it looks fine but when i preview it with internet explorer then it asks me to run scripts with activex. when i say no then my sub menu wont show up when i hover over it. and when i say yes and click the activex thing on the top of my screen then my whole menu shows up with white around it as if the background around the image is white

    thanks guys
    i really need help :(

    jcook November 12, 2009 at 8:26 pm

    1. In the submenu style (ul.MenuBarHorizontal ul – the second occurrence of the style) there is a border property: border: 1px solid #CCC; delete it.

    2. What version of Explorer are you using?

    jcook November 12, 2009 at 8:31 pm

    Actually, you’ll see that message when you try to run javascript locally. When you upload the site, the message should not display. Not sure if it will fix the background issue though. I think it can be fixed with this setting: Tools > Internet Options > Advanced, select the checkbox “Allow active content to run in files on My Computer”

    Linda November 14, 2009 at 12:24 pm

    thankyou sooo much, i will try this!!

    Danette November 5, 2009 at 12:51 pm

    I’d like my children to drop horizontally rather than vertically. In other words I’d like them to be lined up like so: _ _ _ _ when they drop. Is there something I can change in the script to make this happen.

    jcook November 5, 2009 at 12:59 pm

    If you set the width of your submenu list (ul.MenuBarHorizontal ul) to accommodate the total widths of your submenu items (ul.MenuBarHorizontal ul li) it should pop out horizontally. Make sure the width of ul.MenuBarHorizontal ul accommodates your widest submenu and also make sure you don’t have any background-color or borders in the ul.MenuBarHorizontal ul or they’ll look odd with the shorter submenus.

    allison October 28, 2009 at 3:54 pm


    I have the same question as the guy on July 12th, 2009. I tried your suggestion, but it didn’t seem to work. Or maybe I am editing the wrong rules?

    I have a horizontal menu bar, and only seem to be able to set the width for the whole menu, and I can’t get it to the same width as the container on my page (940 pixels).

    Any direction you can offfer would be greatly appreciated!


    jcook November 1, 2009 at 7:53 am

    Being able to see the page would help but:

    The overall width of the menu is set by ul.MenuBarHorizontal (if it’s auto, it’s determined by adding up the widths of the list items: ul.MenuBarHorizontal li. So the two need to work together. If your list items are to large to fit the width of the menu the menu will wrap to an second row.

    JMP October 21, 2009 at 12:34 pm


    I apologize if this has already been addressed–I’ve read through everything but there’s so much I can’t get it sorted in my head. :)

    The problem I’m having is with my submenus. Unfortunately, I don’t have my site online to show you what it looks like, but essentially, in my submenus from the Spry widget, & the submenus’ children as well, the links are not stacking one on top of the other; they are lining up side-by-side, & when I play around with the widths, the column width changes & creates “line breaks” of the submenu text only as needed to fit within that width.

    How do I force each submenu (& sub-submenu) list item to stay on it’s own line so the submenu list is a vertical stack, while also forcing the width of each submenu item to be the same as all the others in the list?

    Any advice you can provide would be most helpful, or please feel free to direct me to another location if this has already been addressed. Thanks for your help!

    jcook November 1, 2009 at 7:42 am

    Hard to tell without seeing the page but it sounds like the width of the overall submenu (ul.MenuBarHorizontal ul) needs to be reduced to equal the width of the submenu list items.

    Sarah October 15, 2009 at 1:49 pm


    I’m finding our spry widgets to be totally messed up in IE 6.0

    In all other current versions of Firefox, IE, Safari, and Chrome they function and display properly but in IE 6.0 it’s a disaster.

    Our site can be viewed at

    This page has both a horizontal menu bar at the top of the page and a spry accordion widget in the right side column. In IE 6.0 the top menu is pushed all the way off the page to the right and the accordion is written over itself.


    jcook October 15, 2009 at 2:27 pm

    Actually there are a lot of changes to your CSS file and it’s hard to know where to start. If I were doing it I would probably start fresh and make the changes systematically and check them against IE as I went. But, here are two areas that might be causing part of your issues:

    In the ul.MenuBarHorizontal style rule, you added top: 0px. I don’t believe that’s necessary and may cause problems.

    In the ul.MenuBarHorizontal li style rule the following may be causing issues:

    width: auto; (should probably be a fixed width)
    left: auto; (unnecessary)
    right: auto; (unnecessary)

    Hope that helps you a least get start tracking down your issues

    Sarah October 15, 2009 at 4:30 pm

    I figured out what was wrong and corrected it. I had added code per instructions for the disappearing background bug in IE 6.0 which messed everything up. I removed that and used the following fix for spry:

    Disappearing List Background Bug can be resolved in Spry Widgets by changing the ul.MenuBarHorizontal li (or ul.MenuBarVertical li) position from relative to static while still maintaining control of drop down menus.

    HOWEVER… there is a new issue. IE is not rendering the menu backgrounds. If you check my page you see white blocks in the ‘padded’ areas. If I remove the padding the white blocks go away, but the layout is messed up. Also some of the menu items in the drop downs are just missing, they appear when you scroll over them. Does this have something to do with the disappearing background bug?

    Sarah October 16, 2009 at 4:56 pm


    I got so frustrated with making Spry work with IExploder 6.0 that I created a dropdown menu with CSS and am very happy with the results. It’s fast, elegant, and works with all browsers. I’m still using the accordion widget though as it seems to be working fine (crosses fingers).

    jodi October 6, 2009 at 2:53 pm


    Got a deadline on a site and Spry is new to me (working in CS3)… 3 questions:

    How do you get text to vertically align centered within the box height? I tried “Verticle Alignment” under “Box” within “ul.MenuBarHorizontal a”, but the text is still defaulting to the top.

    Is it possible to use images (that have the names of the links included) as links instead of having a background image with Spry text over it- if I delete the text for “Untitled Item” a message says “Please provide a menu item label”.

    What is the difference in use between “ul.MenuBarHorizontal” and “ul.MenuBarHorizontal a”?

    Much thanks in advance,

    jcook October 8, 2009 at 8:34 am

    Centering verically with CSS is not straightforward. This might help (or confuse) you:

    It’s possible to use images with text for the background but requires some advanced CSS to hide the text.

    ul.MenuBarHorizontal refers to the a style applied to the entire unordered list used for the menu. ul.MenuBarHorizontal a refers to the style for a link in that list.

    Jerry Mercola October 5, 2009 at 7:22 pm

    Blocked ID #96726

    My spry horizontal menu works fine in Firefox but in Safari the submenus appear as a horizontal line. Any fix for this?

    jcook October 5, 2009 at 8:03 pm

    Is there a url where I can look at the problem menu?

    JerryMercola October 7, 2009 at 11:00 pm


    I think you would also need to see the relevant css files. I put then at

    They are:
    Spry MenubarHorizontal

    Thanks for any suggestions you may have,


    jcook October 8, 2009 at 8:44 am

    I suspect this addition under the ul.MenuBarHorizontal li style is the problem:

    white-space: nowrap;

    Try deleting it.

    Another possibility is using width:auto for ul.MenuBarHorizontal ul rather than a set width.

    Eddie October 3, 2009 at 4:07 am

    i am new to CS4 Dreamweaver and i want to know for my drop down menu i input a table in so i can place more text with hyperlinks and i want to make my submenu the background a bit transparent can anyone teach me how? my background is also an image too for the table in the sub menu bar


    jcook October 3, 2009 at 3:23 pm

    You can place the menubar in a celll of a table but you should really be creating your page layouts using divs (try one of Dreamweaver’s built-in CSS layouts for starters). You could remove the colors from the submenus and use a semi-transparent png for the background but that won’t work in IE6 (if that matters to you).

    Barbara September 28, 2009 at 9:23 am

    I have added a Spry horizontal menu to this site with drop down menus. It works well in IE but in FireFox, Safari, & Opera, I noticed that when you click on the main menu headings(not the submenu headings), the page content below the menu shifts to the right. If I click on the submenu heading, the content moves back to its correct position & the page looks normal. My website is at Do you know how to fix this?

    jcook September 28, 2009 at 10:09 am

    I don’t see anything immediately. You might try backing up your menubar style sheet and going back to the default menubar styles. If the problem goes away, then compare the style sheets for differences. If the problem persists, then it’s not the menubar styles but something else on the page.

    Jo September 15, 2009 at 10:56 am

    Hi, just wondering if you could help! My horizontal menu bar overlaps the div tag below it…id there any way I can get the it to just sit on top??


    jcook September 15, 2009 at 11:16 am

    I suspect you’ve positioned either the menubar or the div below it (or both) using absolute positioning. If that’s the case try removing the position:absloute definition from the appropriate style rule.

    RMacias September 2, 2009 at 2:42 pm

    Is there a way to connect all Spry menus together like a master page and make the change in one place and change all the menus at the same time, I haven’t been able to figure this out and I am making the changes to each page as I add additional links. I have added more pages and looking to add more in hte near future.

    To Recap: Can I link all Spry menus together and make one change and affect all links together. I have been looking at countless websites to figure this out.

    Your help will be very appreciated!

    jcook September 2, 2009 at 3:09 pm

    You really have two options:
    1. Create a template in Dreamweaver and then build your pages based upon the template. Put the menubar in a locked area of the template. Then when you update the menubar in the template and save, the template will “pass” the changes on to the pages that are based upon it.
    2. Put the template in an include file linked from each page. Then you only have to update the include file. This is called a server side include (ssi) and requires php or cooperation from your hosting service.

    Kapone September 2, 2009 at 9:44 am


    I have had to use a spry menu on my site. It shows fine in the Dreamweaver CS4 test browsers and in my Firefox and Google Chrome and even Opera, but in Internet Explorer 7 it shows way off. In IE the sub menus show to the far left of my site all the way out of my #wrapper tag which is my container tag. If anyone knows a fix for this I would be soooo grateful.
    Site is .

    jcook September 2, 2009 at 12:00 pm

    In the style rule ul.MenuBarHorizontal ul.MenuBarSubmenuVisible you changed the left property to -2px change it back to left: auto; and see if that fixes the problem.

    Kapone September 2, 2009 at 10:22 pm


    I spent three days of tweaking code, changing this and messing with that. You look and find one line of css and that fixes it all for me. I am bookmarking you my friend, and telling every classmate in my Web Design 245 class to come here. Thank you man, so much. Now the professor will not have to help me find the issue.


    Kapone September 2, 2009 at 10:24 pm


    I take that back, not that your not a smart person, but I was mistakingly looking at the page in FireFox. It works and has great there, it is still messed up in IE lol. Sorry for the confusion, if you have another Idea please let me know.


    Tom August 18, 2009 at 8:57 am

    I have a horizontal menu bar whose drop down submenus appear below each main item in a vertical alighnent when viewed in DW CS4 Live View. However when I view the page in IE7 or IE8, the submenu items appear horizontally starting below the parent item in the main menu. In Firefox the sub items appear vertically below, as they should. Is there a fix or different settings I can use in IE to make the sub items drop down vertically? I set the width to 1000 px in the ul.MenuBarHorizontal style and to auto in the ul.MenuBarHorizontal li and ul.MenuBarHorizontal ul styles. I have put my test page on Thanks in advance for your help.

    jcook August 18, 2009 at 9:39 am

    I believe you’ll need to set a definite width for the ul.MenuBarHorizontal ul style.

    Tom August 18, 2009 at 10:24 am

    That worked as far as displaying the sub items vertically below the parent item. However in IE the submenu items are different widths depending on the length of the text for each item. In Firefox and in Live View the subitems are all as long as the longest item, giving a much better appearance. Can I get the subitems to appear with a fixed width and still keep the main items set to auto? Thanks.

    jcook August 18, 2009 at 10:36 am

    Try setting the ul.MenuBarHorizontal ul li (which you may have to create) to the same width as the ul.MenuBarHorizontal ul style.

    Tom August 18, 2009 at 10:46 am

    That works great. Thank you for your help.

    jcook August 18, 2009 at 11:19 am

    Glad I could help!

    valveless August 13, 2009 at 8:21 am

    Hi, thanks for a great tutorial and a great forum. I’m having a similar issue to others who have posted on this page in previous years, and wonder if you’ve discovered a solution:

    Horizontal Spry Menu works great in Firefox 3.5, Safari 4, Chrome, Opera 9.6 (LOVE Opera, btw) … but breaks in IE 6, 7, and 8. Sudden bizarre placement, page background changes, a big rectangle that says “false” (?!) and 3rd-level submenus appear off the page. I’m using CS3, if that matters.

    Is this simply a width issue in one of the styles? Sorry if I missed an answer elsewhere among the posts …

    jcook August 13, 2009 at 8:36 am

    Sorry, but you’ve made a lot of changes and nothing stands out immediately.

    Two possibilities stand out:

    Did you make any changes to the Javascript?

    It might have something to do with all of the width: auto properties you’ve added. It could be the way IE add them up that they are pushing the menu elements around.

    Sorry I can’t be more helpful.

    valveless August 13, 2009 at 8:52 am

    No changes to the .js (I’m not quite that smart) … I think I’ll do another menu from scratch — sadly — and see what happens. I’ll keep you posted, pardon the pun.

    valveless August 13, 2009 at 10:24 am

    OK, rebuilt the menu and everything works (structurally) in IE. I don’t get the opacities that I wanted in the drop-down menus, and my text-resize and feed buttons are lowered in IE, but that’s a small price to pay for having it work correctly in the world’s most popular browser.

    Thanks again for the help, and for your site and forum!

    lsk August 9, 2009 at 10:34 am

    In DW CS4, I’d like the page I’m on to stay highlighted in my horizontal nav bar.
    Thank you.

    jcook August 10, 2009 at 8:13 am

    The simplest way to do this is to create a special style (say .currentPage) and then apply it on a case by case basis to the appropriate link in your menu. The downsize of this method if you’re using templates is that it requires your menu to me editable.

    Maggie August 7, 2009 at 7:46 pm


    First of all – thank you so much for your willingness to help! I have spent countless hours browsing help forums to try and figure out these menu bars and have not had much luck. I’ve read through all of the comments/tutorial and am still hitting some road blocks. Would love your help!

    Unfortunately, I don’t have a web-site to be able to show you but hopefully I can explain what I am trying to do…

    I’d like to have a main menu that has a transparent background and white text for 7 out of 8 menu items. When you scroll over the links should turn orange… As of now – I have this working except I can not get the 1 menu item to start orange (although I have gotten it to be white when scrolled over…so basically now it is just white all the time). This specific 1 has no drop-down menu. The first 6 items all have drop downs and I’d like for the links in the drop down menu to be smaller (text size) and (while the text starts as white) it turns red when you scroll over. I imagine I’d do this in a similar fashion to the 1 main menu item but that isn’t working (and I did try what you suggested farther down in one of the posts – making a new “oddball” class – it halfway works…)

    Also – I’d like to have the drop down menus centered below each main menu item rather than line up on the left. I have the width of each set to auto so that isn’t an issue…would just like it to be centered.

    Any help you could offer would be fantastic! One last thing – is there a place or site that lists what each of the .css styles represent? e.g. explaining the difference b/t ul.MenuBarHorizontal vs. ul.MenuBarActive etc…

    Thank you!!!

    jcook August 10, 2009 at 8:16 am

    Maggie, sorry but there’s to much there to address especially without being able to see you code. As for an explanation of the styles, if you open the style document itself, Adobe has provided a lot of comments to help you understand what the different style rule do.

    Ian August 24, 2009 at 7:50 pm

    I had the same problem. The closest guess I can make of it is that it has something to do with changing the background of the submenus and the mobile css declaration at the end. I went through line by line with a “fresh” veritical menu css file and changed to what I had in the old one. Nothing really seemed to make a difference except that last statement

    @media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

    At one point I noticed that I’d changed the width of the submenu element from 8.2em to “200pxem” and fixed that, but who knows . It’s some pretty sensitive and complicated script. All I can suggest to anyone having this problem is to revert to the original SpryMenuBarVertical.css file (or horiz) and go on from there…

    Amanda August 6, 2009 at 12:05 pm

    After following the advice on this site, I am still having 2 issues:

    1. I created new rules for the submenu to not have a border-left like the main menu does in hover and no matter what I change I cannot get the submenu to not have the border-left. It isn’t apparent at first, but if you put your mouse just over enough to the edge of the box it appears.

    2. Is there a way to make it so the submenu is centered to the main menu itself? Look at Services, for example. Before you scroll over the last submenu item appears on the left side of the screen (this may be a separate issue?). When you scroll over it goes further over than the main menu bar (if I could center from the services it wouldn’t cause that problem).

    Any help would be great! Here is the test site to see the in-progress nav:

    Thank you!

    jcook August 6, 2009 at 12:30 pm


    you added the border to the links in this style:
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

    To remove it for only submenus you need to add this style and remove the border there:

    ul.MenuBarHorizontal ul a:hover, ul.MenuBarHorizontal ul a:focus

    Notice the nested ul I added.

    On a wide screen your submenus are showing off to the left side. I believe that’s because you added position: relative; to the ul.MenuBarHorizontal li style. If you delete that it should fix the problem.

    You can adjust the margin of ul.MenuBarHorizontal ul ul to determine how the submenus are positioned. Not sure if you’ll be able to get them all centered though.

    Amanda August 6, 2009 at 3:37 pm

    I followed everything you wrote re: removing the border-left on submenus… nothing changed. Do you know what else I can do?

    Also, I have the menu words red and I want the submenu to be dark grey and then light grey on hover (to match the hover color of the menu). I followed tips and created a new class titled:
    ul.submenuOddball then added that in to code to each submenu titles, example:
    bfi group but as you can see it doesn’t change the color of the submenu at all…is this an easy fix?

    As far as positioning the submenu and overlap on the left side…that worked perfectly!

    I really appreciate your help!

    Amanda August 5, 2009 at 3:17 pm

    Just wanted to say this site is awesome! I have learned more from these posts than most of my searches…and it’s all pretty much current which is nice to see! Thanks again

    Adam August 4, 2009 at 8:54 pm

    Hopefully someone will see this post and can offer some quick advice.

    I am trying to get a website together for my sister as a wedding gift and I am running into problems viewing it in IE vs FF.

    If you go to and look at the Spry menus I have at the top of the page. The first one you can ignore as I am using that one to try to figure out the problem. The other two work as I intend in firefox, but as you can see in IE they go to crap.

    A little info: Top element usese a background image, drop down links use a 1px/1px gif as an image background and a color value also. The css is

    jcook August 5, 2009 at 3:32 pm

    Why are you using three menus rather than one, full-width, menu. To be honest that makes it pretty hard to debug. I really can’t locate the exact issue (if it’s only one).

    YMM July 28, 2009 at 3:32 pm

    I created a horizontal Spry menu bar on DW CS3; it works fine in ff and Safari, but in IE (on PC) the submenu items don’t stack vertically but horizontally, going off the page to the right.

    The link is

    Thanks for any suggestions!

    jcook July 29, 2009 at 10:29 am

    It looks like you deleted the width in the ul.MenuBarHorizontal ul li which may be the problem.

    Glynis July 23, 2009 at 2:10 pm

    What is the best way to place an image (logo) directly beside a horizontal spry menu bar? I want the image to sit to the left edge of the menu bar and center itself in the browser window with the menu bar? Any ideas? Thanks!

    Glynis July 27, 2009 at 10:42 am

    Never mind, I figured it out by using divs and floats.

    Nicholas July 23, 2009 at 9:00 am

    How can i set only 3 of my 4 menu buttons with the same background image and the fourth with a different one? What code would that require? where do i insert this code?

    Thanks in advance

    studioJMC April 5, 2009 at 1:46 am

    @Nicholas you can use an inline style to set the background of the odd button. Something like this:

    <li><a href="#" style="background-image: url(image.gif)">Item 1.1</a></li>

    That will overwrite the default button background image for that one button only.

    Glynis July 22, 2009 at 11:28 am

    How do change the hover color for those odd buttons?

    jcook July 23, 2009 at 10:34 am

    (BTW, I bumped this post to bring it back up top.)

    The best thing to do would be to create a new style class, say “oddball” and apply it to the odd link like this:

    <a href="#" class="oddball">Item 2</a>

    Then create a new style in your style sheet named ul.MenuBarHorizontal a.oddball:hover and apply your hover formatting there.

    At the same time you might as well avoid the inline style (it’s better to avoid them if you can) and create a new style, ul.MenuBarHorizontal a.oddball to handle the normal state of the odd menu item.

    cd July 21, 2009 at 7:55 pm

    When I make all the text in a spry menu centered Internet Exploder makes the drop downs go nuts and stick to the top center of the page. All other browsers are fine and all browsers, messed up or not, display the text centered in the buttons. This issue was created using cs3dw. Thank you for any help you can give.

    jcook July 21, 2009 at 8:27 pm

    I doubt that centering is the problem but I really can’t tell anything without being able to see the page.

    Pablo August 9, 2009 at 8:25 pm

    I have the same problem as cd:
    If I have the menu centered iun the cell, the drop downs go nuts. If I don’t they work coreectly, but the menu goes left. I need both the menu and the text centered. You can see it here:

    jcook August 10, 2009 at 8:29 am

    Instead of placing the text-align: center property in the link style try placing it in the main ul.MenuBarHorizontal style and see if that helps.

    In CSS styles of parent objects “flow down” to children.

    Lui July 21, 2009 at 1:51 pm

    Can you have different widths in the Spry menus. Let’s say you have one drop down menu with a 4 letter word like (HOME) and others with 4 words like (ASK YOUR GARDNER ADVICE). I don’t want the drop down menu with (HOME) to be so long. Can I change the width of one menu to be let say 10 ems and the other menu to 20 ems? Can anyone help.


    jcook July 21, 2009 at 2:28 pm

    Instead of setting the widths of the menu items to a specific em or pixel number, try setting an overall width for the menu and the set the width of the menu items to auto and see if that works for you.

    mikael June 5, 2009 at 11:27 am

    Have you got a good tutorial on Z index as I wouldn’t know where to put it or what values to use
    thanks for your help

    jcook June 5, 2009 at 11:39 am

    As I said, I don’t know that that’s the problem but you can look here to get sarted:

    mikael June 5, 2009 at 10:54 am

    Like this site
    I want the drop down menus to cover the content as it drops
    Noticed the double post now, sorry…

    jcook June 5, 2009 at 11:08 am

    The only problem I see is in IE6 and that only happens until the page fully loads. My only thought would be changing the z-index (stacking order) on the div holding the menu and the div holdin the other content.

    mikael June 5, 2009 at 4:30 am

    Hi JC
    I have created a horizontal spry menu bar. I want it to activate the submenu on click which I figured out how to do, but I can’t figure out how to get it to show the sub menu inside the sub menu (ie item 1.1.1) to show on hover, only the same as the parent (click or all hover)
    Alternatively I would like it to show on hover, however my submenus are quite long (up to 25 items) and when you move the cursor below the titles of the menus (where the submenu will show) it pops up. I ONLY want it to show when hovering over the title itself

    Grateful for any advice


    jcook June 5, 2009 at 10:49 am

    Mikael, I’m sure it’s possible but it would probably require editing the javascript file and that’s beyond the scope of what I can cover here.

    lisa May 21, 2009 at 12:37 am

    I am using Dreamweaver CS3. I created a horizontal spry navigation bar menu. I want the submenu to also display horizontally. I can’t find it in the css, so I suspect it might be controlled by the js file. Is there a change I can make to the js file so the submenu will also display horizontally?

    jcook May 21, 2009 at 6:49 am

    Although I haven’t tested it thoroughly, it appears to be relatively easy if you only have one level of submenus. In the style ul.MenuBarHorizontal ul set the width (the default is 8.2 ems) to a width that is wide enough to contain the items in your submenu. So, if your longest submenu has 4 items with the width of 100 pixels, you’ll need to set the width in ul.MenuBarHorizontal ul to at least 400px. There may also be some formatting issues you have to deal with. For instance you’ll want to remove the border from the style with the same name that appears in the DESIGN INFORMATION section of the style sheet.

    And this method won’t work, without more major changes for sub-sub-menus.

    Lisa May 21, 2009 at 8:52 am

    WOW! You’re a genius! And generous with your know-how. I really appreciate your help with this! I look forward to doing your course! I wish you continued success with your endeavors!

    Celeste May 11, 2009 at 12:44 pm

    I’ve got my spry menu bar looking good on the home page, and starting to building the rest of the pages. But… how to make the ‘button’ active on the new pages? Do I have to go back to the old
    <a href="whatever" rel="nofollow">
    for each page?


    Thanks for any advice!

    jcook May 11, 2009 at 1:47 pm

    Do you mean highlight the current page button in the menu?

    Kumaaran October 11, 2009 at 4:49 am

    Hi JC,

    Your help is incredible in solving so many problems we encounter in designing a website.

    I have similar trouble; Can you please help me?

    1. I would like to highlight the current page button in the menu that I have created using spry.

    2. The sub menu, in IE, shows vertically above the menu bar instead of below the main item.

    Your help is highly appreciated.

    jcook October 11, 2009 at 10:41 am

    1. The easiest way to indicate the current page is to to create a special style class (say .current) with the properties you want and then apply it to the appropriate link on a page-by-page basis.

    2. It looks like you added the top property to this style, you should remove it:

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;

    Kumaaran October 13, 2009 at 6:07 am

    Thanks JC for your prompt reply with suggestions.

    1. I checked the code and didn’t find the top property.

    2. Can you please throw more light on “create a special style class (say .current) with the properties you want and then apply it to the appropriate link on a page-by-page basis.”

    Will this be in the css style sheet or in SpryMenuBarHorizontal.css or in each page. Can you please give me an example?

    Thanks once again.

    Kevin April 3, 2009 at 3:21 am

    I was still hoping for some more info about how to make rounded corners on the submenu items. You said that you might cover it in a later post but I have never seen anything else about it. Could you go into more detail or help me to locate a source that I could learn more about this from?



    studioJMC April 3, 2009 at 4:34 pm

    Sorry Kevin, I’ve been wanting to post on this topic over at my new site but time hasn’t permitted.

    The basics of what you need to do are:

    1.Create a background image with the rounded corners
    2. Create a style for submenu links: ul.MenuBarVertical ul a
    3. Make your image the background image for the new style

    You’ll also need to do the same for the links that have submenus: ul.MenuBarVertical ul a.MenuBarItemSubmenu and include the small arrow icon in the image

    And, you’ll need to create background images for the hover states of those links as well (ul.MenuBarVertical ul a:hover and ul.MenuBarVertical ul a.MenuBarItemSubmenuhover.

    And remember, your link has to “fit” the background image so, if the text goes to 2 lines that may be a problem.

    Good luck and BTW, Dreamweaver CS4’s new live view feature is great for getting immediate feedback on changes to your CSS style sheets.

    rudy March 10, 2009 at 6:25 pm

    I have created a horizontal menu bar successfully, but when I preview it in the browser it shows up vertically? What am I doing wrong? I have plenty of space for it to span horizontally and it looks correct in the design view but in the browser it is vertical.

    Jason Oliver March 5, 2009 at 7:59 am

    Greetings. I have created a website using Spry panels, which ‘resize’ fine in Opera and Firefox to the amount of information in each container, but in Safari, there is a big white space in each container under the content of each panel. Any idea why this might be?

    The website is..

    Thanks in advance.


    Cullen February 20, 2009 at 6:38 pm

    I am currently having the same problem as Tami. Has anyone found a solution?

    PS thanks for the tutorial!

    studioJMC February 20, 2009 at 7:36 pm

    @Cullen can you post a URL for us to look at?

    Cullen February 20, 2009 at 8:16 pm

    Sure, here is the link.

    This is just the framework but it will show the issue. If you hover over the orange menu items you will see that they work correctly. However, if you hover over the blue items the drop downs are aligning with the top of the page. This is only happening in IE.

    crw February 23, 2009 at 5:17 pm

    @Cullen this should get you going. If you were starting the styles for the second menu over, simply:

    1. In the html for the second (blue) menu change the id to “MenuBar2”.

    2. At the BOTTOM of your CSS definitions define new link – a- styles as follows (all the other styles will be picked up from the other menu):

    #MenuBar2.MenuBarHorizontal a
    color: #99cccc;
    background-color: #00539b;

    #MenuBar2.MenuBarHorizontal a:hover, #MenuBar2.MenuBarHorizontal a:focus
    color: #FFF;
    background-color: #00539b;

    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

    color: #FFF;
    background-color: #00539b;

    I believe that should do it although you may need to resize the table containing MenuBar2.

    Cullen February 23, 2009 at 8:52 pm

    Thanks for the help! the “#MenuBar2” did the trick. I needed to add a couple more styles to get the full effect but it worked great. Thanks again!

    Trixx February 13, 2009 at 6:00 pm

    I have a horizontal menu bar at the bottom of my webpage. Now I want my submenu’s to go up and not to go down. Can someone tell me how to do this?

    Andrew Grant February 8, 2009 at 1:38 am

    Thanks, but I don’t believe that Flash fix is related to my problem. What site do you recommend for performing cross platform compatibility tests?

    Andrew Grant February 7, 2009 at 5:19 am

    Hi. A friend just informed me that she cannot see all of my Spry drop down menu on her PC with Internet Explorer. Do you know of a fix for this?

    Secondly, although the drop down menu appears correctly over the Flash piece on my home page in Firefox, it does not float over the Flash object in other browsers. Any fix for this?

    The menu is at Thanks!

    Tami February 5, 2009 at 4:44 pm

    I’m having two issues: 1) My sub menus float to the top of my web page instead of directly under the parent in IE 6 & 7 … I have tried everything! Please help! 2) Firefox & Safari, subs are directly under the parent, but they are moved over to the right with a border showing to the far left …. I’m using CS3DW.

    Please advise.

    studioJMC February 5, 2009 at 5:13 pm

    @Tami, I get a can’t connect to server message from the url you submitted.

    Liz February 4, 2009 at 4:11 am

    I am using DWCS3 to update a school library website and am new to DWCS3. I am using the horizontal sprymenu bar and want the menu button to stay the hover color when a submenu item is clicked on. I also want the HOME button to be the hover color when a user comes to the site. I have updated 1. ul.MenuBarHorizontal a:hover, ul.MenuBarVertical a:focus and 2. ul.MenuBarVertial a.MenuBarItemHover, etc to the hover color. The hover color works, but when I click and go to the page, the main menu button does not remain changed. Is there anyway to do this? I want users to know which section they are in.

    studioJMC February 4, 2009 at 2:02 pm

    @Liz, basically it can’t be done using the Spry menus in DWCS3 without a lot of tricky hand coding. Pop Menu Magic from Project Seven does what you want. It costs $95 and requires a bit of knowledge of CSS styles to customize the colors.

    bob February 3, 2009 at 4:40 pm

    but, i want it to be there all the time as the navigation interface for the website

    bob February 2, 2009 at 5:13 pm

    Is there any way for me to incorporate that menu on my website without creating a menu on every page?

    bob January 30, 2009 at 5:24 pm

    my web page has 2 frames, top and bottom. i want a spry menu bar in the top, horizontal, is there anyway i can set that top from to ignore the border rule without compromising it being viewable by all browsers? no website example because we are remaking a website and haven’t published it, we are leaving the old website until we are ready to publish it.

    Christina Rivet January 5, 2009 at 11:39 pm

    Horizontal Spry menu bar submenu under main headings of Calendar, Study Aides, Links, and Homework.

    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.

    Christina Rivet January 5, 2009 at 10:56 pm

    Dreamweaver horizontal spry menu bar sub menus open in IE but will not drop down/open in Firefox?

    KT January 4, 2009 at 2:32 pm

    Am having the same difficulty as SR. When viewed in Firefox the horizontal menu shows vertical submenus which is what is needed. However, in IE both main and sub menus are horizontal.

    Are there any solutions. thanx.

    SBW December 27, 2008 at 9:45 pm

    I’m trying to create a spry menu where as the blocks look like buttons not just solid squares. I am completely lost. Do I need to create the effect by applying the button image to the block somehow or am I further off than that?

    SR October 16, 2008 at 3:22 am

    Hello. I am having several problems with the spry bar. First of all, the main issue I am having is that I would like the sub menus to pop up in a vertical fashion instead of horizontal. In other words, I want the main menu to be horiz. and the sub to be vert.

    One way that I have found to do this is to set the width of the sub menu to a fixed width, but when doing so, my longer sub-menu-text causes the shorter text to move to where there is more than one menu item per line, making the sub menu confusing to viewers.

    If you view my page, I have the menus set to an auto width and a fixed height to rid this problem (so you will not see it), but I would actually like to get them formatted in the fashion previously stated.

    So basically I want each sub menu item on their own line in a vertical, left aligned, list with the main menu in one horizontal line. How can I do this?

    The next problem I am having is that I want the main menu width to shrink and stretch with the page. Again, I have found a way to do this, but when I force the menu to stretch/shrink with the page width, the menu item text overlays the category next to it. How can I get both the main menu to stretch/shrink to the page as well as make the text to shrink or expand to fit its box (not run into the next category).

    I hope I have explained my issues good enough and thanks in advance for any assistance you can provide.

    ebbhead2 October 6, 2008 at 8:30 pm

    I created a spry horizontal menu and need to change the position and color of the text in each container of the menu. Do I create a style sheet for each one? If so, what kind do I create? sorry but I’m new to spry menus….
    Any help would be appreciated!

    abernut September 29, 2008 at 1:17 pm

    Is there a way to add more than just three main categories in the Horizontal menu bar?

    Jon September 4, 2008 at 12:04 pm

    I’m pretty new to DW (and web design in general), and I’m using a horizontal spry menu bar in a new site. I’m running into a glitch in Safari that I can’t figure out. The bar goes almost to the end of the div in FF and IE7, but when I preview it in Safari, it puts the last menu item on the next line. I have it set to auto width for each box, but I tried adjusting the padding, etc. to make the bar shorter, but it’s not solving the problem. Any ideas?

    JM September 2, 2008 at 5:11 pm

    Also, forgot to mention this .. is there anyway to center the menu?

    I have it being required with a php require tag and in a table tag which is centered, however, the menu does not center on the page. Anything in the CSS?

    Design Refugee September 2, 2008 at 4:20 pm

    @Jane sorry to be so slow. Can you show us a sample of the problem?

    @JM, try just setting just a top or bottom border (not both) for the links.

    JM September 2, 2008 at 4:00 pm

    Is there anyway to reduce the size of the borders in the menus .. it seems when I use 1px .. they seem a tad thick where they join with another menu (in the horizontal menu and the drop downs).

    Jane August 24, 2008 at 12:01 am

    I was able to change the width of my spry menu bar with your instructions, however it made the submenus teeny tiny and I can’t figure out how to change their size.
    Any tips?

    Design Refugee August 19, 2008 at 9:17 pm

    @Scott, if the changing photos are in Flash you’ve got a problem. Some browsers render flash on top of all other content. Otherwise put them in a div and make sure it’s behind the menu in the stacking order (z-index) .That’s under Positioning in DW’s CSS rule definition dialog.

    Scott Warren August 19, 2008 at 7:15 pm

    OK, I checked with my nephew who is a web dude and he gave me an easy fix to the Firefox-cursor glitch (style=”cursor:pointer; I have made the corrections). He is still looking into the disappearing drop sub-menu in the Spry menu bar and the race is on! Who of the two of you will figure this one out? I do know this has been a problem with other web developers but I have seen photo websites where this does not occur. At the very least, I hope you enjoy the photos on my website.

    Scott Warren August 19, 2008 at 4:42 pm

    I have included a spry horizontal menu bar in my website (thanks to DWCS3) and it works great in Safari. In Opera, however, the changing photos in an image viewer on my index page covers up a drop down sub-menu beneath Editorial. This also happens in Firefox, as does the lack of a pointing hand cursor when mousing over anything in the menu bar. Are these items fixable?

    Design Refugee August 13, 2008 at 2:07 pm

    @Chris, etc. It’s tricky. You’ll have to use a background image either for all the link (a) tags or create and apply special style classes for the first and last links. The actual implementation is more than I can get into in this limited space. Maybe a future post???

    Chris August 13, 2008 at 2:02 pm

    I too was wondering the same question as #10 and #16…how do I make the edges rounded? Either each button, or just the first and last, to give it a rounded look. Please help.

    Design Refugee August 5, 2008 at 8:55 am

    @Nicky, I don’t know anything about Office LIve. But a domain can have as many pages as you want. Just save them with different file names (contact.html, about.html, etc.). As for creating the links, etc. I’d recommend working through the Dreamweaver tutorial.

    Nicky August 5, 2008 at 12:15 am

    also, when i add the new page that is supposed to link to the tab, and develop it, do i got to site>manage site and then click on the exisiting home page, or do i go to site>new sight and make a completely new page…. im a little new to dream weaver but thank you REFUGEE!

    you are really coming to my rescue.

    Nicky August 5, 2008 at 12:06 am

    at office live, they only give 1 domain name…. they told me to save the website at dreamweaver default.htm. that was successfull, but the tabs are still are not working. how can i create “other” pages at officelive when i am only given one domain name?

    Design Refugee August 3, 2008 at 10:06 pm

    @Nicky, you still have to create the links. By default the link is to “#” which is basically just an empty link. You need to create your other pages and link the menu items to them.

    Nicky August 3, 2008 at 8:16 pm

    i cant get my spry menu bar to work! i need them to link up to the places they need to go but it just stays on the home page. how can i get it to work?? please help me. my website server is office live BTW.

    Tyler Tech July 22, 2008 at 5:02 pm

    RE:Dave Newbe Says:
    12:23 am

    I was wondering is there any way to make the spry menu have rounded edges, rather then the standerd box shape?

    I am trying to do the same, any idea how I would accomplish this? Can it be done in the CSS or am I going to have to make spacers for each side and get them lined up correctly?

    Design Refugee July 13, 2008 at 2:25 pm


    Sorry but Spry menus don’t work well with frames. You’re menu is probably functioning just fine but since it’s contained within a frame, the expanding part of the menu isn’t visible.

    Marcus July 13, 2008 at 2:18 pm

    I hope you can help me.
    I’ve MenuBarHorizontal in my testpage.
    Anyway I’ve decided to use frames for my website. So the menue is in the topfram and under I’ve the mainframe with a statrpage.

    Anyway when I then try to look at it in my webbrowser it doesn’t work properly. The link that should be scrolling down and show the submenue can’t be seen.

    I think it’s because the mainframe prevent the topframe to let the menue be visible properly.

    Is it anyone that knows how I can solve this problem. I think it must works to using frames and the MenuBarHorizontal, doesn’t it?

    Abhishek Bansal May 8, 2008 at 2:53 am

    Please tell me is there any way to assign a unique color to each of the tabs in the menu of the Spry Menu. I know how to set the same color to all of them but want to be able to assign unique color to each of the tabs.

    dee April 25, 2008 at 4:50 pm

    Created the menu just fine and it works great when looking at the site in a browser. However in dreamweaver CS3 the menu is fully expanded and will not close which makes it very hard to make changes to the surrounding items. Also I don’t get the little eye that lets you expand each panel.

    I figured it was corupt but all of my backups do the same thing.

    Any ideas,


    Jennifer April 7, 2008 at 8:39 pm

    Yes, I am trying to create a horizontal menu with horizontal submenu just below the parent menu. Can’t figure out how to tweak the spry css file to do this. Anyone successful yet?

    Dave Newbe April 6, 2008 at 12:23 am

    I was wondering is there any way to make the spry menu have rounded edges, rather then the standerd box shape?

    Sean March 31, 2008 at 12:41 pm

    Hey. I cant seem to adjust the width of the main menu in Safari. adjusting from *ems to 7 or 9 changes in firefox, but not Safari. Any ideas? thanx.

    Lisa in Los Angeles March 14, 2008 at 2:01 am

    Hi, there —

    I’m trying to set up a horizontal spry menu bar, but I’d like the submenu items to open horizontally as well, just below the parent item. Is this possible?

    Thanks so much,

    Meierdecox January 11, 2008 at 2:12 pm

    I’ve created a horizontal menu bar for the main site navigation. In FF it displays fine. In IE7, the sub-menus display below the main bar but horizontally rather than vertically. It is unstable and sometimes they display vertically too. Any help you can provide is greatly appreciated.

    alejandra January 10, 2008 at 7:35 pm

    I’m working with horizontal Spry Menu. I already figured out how to apply a background image but it applies it to every item. Can I apply a different background image to each item in the main nav and the apply the same bg image to all the sub nav items?
    How do I do this?
    Tahnk you very much.

    Design Refugee November 26, 2007 at 7:57 pm

    @sierra it’s normally a matter of making sure you upload all the external files DW creates to make the menu work. In addition to what you’re used to there may be files in the “SpryAssets” folder that need to be uploaded.

    sierra October 23, 2007 at 5:55 pm

    I am new to DW CS3 and am trying to use the spry vertical menu to improve our aged website. I have got it looking great in dreamweaver and test it in the browsers but when I try to put it online it just looks like an expanded UL / LI list. I’ve meticulously checked all the linked CSS and JS and cannot find anything the matter. Is there something else I’m missing? Thanks for any help you can give me!

    Adje October 15, 2007 at 12:03 am

    Another interesting you can do is duplicate ul.MenuBarHorizontal a.MenuBarItemSubmenu and all similar files but add a new name. From here you can change the arrow image to another image of your choosing and if you specify a new width which is in concordance with the width of the box and you center the image within the box, you can create a separate background image for each menu item as long as you have specified a new name for each style and assigned each style to a different box. I was trying to figure it out and I found your site in my search, just thought I’d point this out to anyone who, like me was trying to put an image into the menu bar! Great tutorial by the way!

    Design Refugee September 24, 2007 at 12:07 pm

    Sorry to be slow to respond I’ve been out of the office the last two weeks.

    It’s not easy in MX 2004 (one good reason to upgrade). It can be done by putting the submenu in a hidden div that is displayed (using the “show-hide elements” behavior) when rolling over the relevant link but it can be a bit tricky to implement.

    Arati September 11, 2007 at 11:49 pm

    How do I do this in Dreamweaver MX 2004? Just a simple menu, no images etc. Text should change colour on rollover only.

    What I want is that I have a text menu:
    xx yy zz aa bb ccc

    If I rollover yy, it should have a text submenu that pops up:
    xx yy zz aa bb ccc
    ddd dddd dddd ddd dddd ddd

    I have just started using dreamweaver, so not much I know!!

    Would be grateful if you could help!

    jcook October 13, 2009 at 9:13 am

    1. Sorry, it looks like you need to ADD it to the style rule I mentioned.

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;

    2. You’ll need to add a new class (called .current) and give it the properties you want. Then you apply that class to the applicable link on each page. If you’re unsure about how to create a new style rule.

    Comments on this entry are closed.

    { 2 trackbacks }

    Next post:

    Home | Make Contact