Going out of my mind on this one.

I installed a horizontal spry menu bar in a site I'm working on. As usual,
things look fine in FF and Safari on the Mac, but try as I may, I cannot get
the drop downs to appear directly below the main menu. They all shift over to
the right about 50%.

I have upgraded my spry to 1.6.1. I have tinkered until my typing fingers
bled. I cannot make this thing work. Please help.

Here's the site: http://staging.natlands.org/ssi/ssi_header_03.html

Here's the CSS:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/************************************************* ******************************

LAYOUT INFORMATION: describes box model, positioning, z-order


************************************************** *****************************/

/* The outermost container of the Menu Bar, an auto width box with no margin
or padding */
ul.MenuBarHorizontal
{
list-style-type: none;
font-size: 11px;
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
width: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#MenuBar1 {
width: 537px;
height: 30px;
padding-left: 0px;
display: inline;
margin: 0px;
float: none;
}
#MenuBar1 a {
color: #FFFFFF;
}
/* Set the active Menu Bar with this class, currently setting z-index to
accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are
a fixed width */
ul.MenuBarHorizontal li
{
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 107px;
float: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1px;
}

/* Submenus should appear below their parent (top: 0) with a higher z-index,
but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 107px;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we
set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
position: absolute;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 107px;
font-size: 9px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%)
*/
ul.MenuBarHorizontal ul ul
{
position: relative;
margin-top: -5%;
margin-right: 95%;
margin-bottom: 0;
margin-left: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we
set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: 0px;
top: 0;
}


/************************************************* ******************************

DESIGN INFORMATION: describes color scheme, borders, fonts


************************************************** *****************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #006666;
color: #FFFFFF;
text-decoration: none;
padding-top: 2px;
padding-right: 0em;
padding-bottom: 2px;
padding-left: 0em;
}
/* Menu items that have mouse over or focus have a blue background and white
text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #CC6600;
color: #FFF;
text-decoration: none;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a
blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #CC6600;
color: #FFF;
}


/************************************************* ******************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item


************************************************** *****************************/

/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on the far
left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on the far
left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}


/************************************************* ******************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert


************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we
underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is
to keep IE 5.0 from parsing */

@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: none;
background: #FFF;
margin-top: 1px;
}
}


Here's the current CSS.

I don't know if you still have this problem.

Just add this in the right section:

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
}

Hi art270,
I feel your pain. I am having the same exact issue with my horizontal spry
menu bar. In IE the submenus shift 50% over to the right. I noticed that the
page you linked to in your post is working. What did you do to fix it?

I actually bailed on the Dreamweaver spry solution and installed something else
recommended to me by a programmer. He sent me here:

http://javascript-array.com/scripts/...rop_down_menu/

Works like a dream and is MUCH simpler to style.

Very cool. This will work like a charm. Thanks for the help!

hey guys, I felt that it was worth my while to create a login for this site to reply. I had read this forum while looking for a fix to why the entire menu shifts when i resize my window then jumps back into place when i hover over it, anyways that a diff problem and moral to the story is I ended up with the same problem you guys had later on and found out that by center aligning text in ul.MenuBarHorizontal li will cause the submenus to also reposition. So simply live with left justified is my temporary solution.

Alright everyone...i was having the same issue and when i went back and changed ul.MenuBarHorizontal li to left i noticed that it fixed my problem AND my text was still centered in both my main menu bar and my submenu bar. Here is why. Make sure that you have the following:

ul.MenuBarHorizontal li text-align:left (from esmullen)

then make sure you have:

ul.MenuBarHorizontal a text-align:center

This worked for me so hopefully it works for you! Good Luck!