Spry submenu appears way right in IE on horizontal menu

Hi,
I have tried all the fixes in the other posts but none work.
My submenus are appearing clear over to the right of the page on my
horizontal menu. This has to be an z index problem. The site is
www.oregontrailcenter.org.
Mouse over the first item The Trail Center then the bottom item
"Support Opportunities". The menu appears almost off the right side
of the page. Thanks for any help you can give me.
My code is below:

I figured this one out on my own. No worries!

Similar Messages

Problems with Spry submenu appearing directly underneath parent in IE.

I've checked out a lot of forums but I can seem to find a solution to my spry issue. My spry submenu will not show up directly underneath the parent in Internet Explorer. Firefox and Safari look fine. I'm somewhat new to the Spry menu so any help would be appreciated. Here is my site: www.mattcreason.net. It's the portfolio tab.
Here is my SpryMenuBarHorizontal.css code:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-repeat: no-repeat;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: 163px;
float: left;
background-repeat: no-repeat;
visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 163px;
position: absolute;
left: -1000em;
height: 48px;
top: 48px;
/* 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
position: absolute;
width: 163px;
left: auto;
top: 48px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 163px;
background-color: #8C0002;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
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;
padding: 0.5em 0.75em;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #FFFFFF;
/* 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: #B89B5C;
/* 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
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-repeat: no-repeat;
height: 48px;
width: 163px;
padding: 0px;
clear: none;
float: none;
margin: 0px;
background-image: url(../jpegs/PortfolioButton.jpg);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* 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-repeat: no-repeat;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
/* 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-repeat: no-repeat;
background-position: 95% 50%;
background-image: url(../jpegs/PortfolioRollover.jpg);
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
Thank you!

You not are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Gramps

Spry Horizontal Menu IE7 Problems

Hey, I'm have a lot of trouble with IE7 and my drop down
menu. When I mouse over the menu and the submenu appear way above
the nav bar, I want it to be just below the nav bar. Things are all
good in Firefox. I have tried changing everything in the css file
but nothing works. I have also tried upgrading the css 1.61.
Please Help
Thanks
Scott

I am not the world's best coder and I have spent forever
trying to
learn and figure out some problems on a menu bar i have
created using
the base dreamweaver spry framework. It looks exactly like
what i want
it to look like on Firefox, Safari, and Google Chrome,
but--of
course--- Internet Explorer is creating massive dificiulties.
Namely,
the drop down menu is completely non-existent. I tried
changing the IE
hack to float right, rather than float left and then the menu
appeared
but with all the subsequent boxes lined up in a row. Here are
my
links, can anyone help me?
http://www.agellsworth.org/index2.html
http://www.agellsworth.org/SpryAssets/SpryMenuBarHorizontal.css
Thanks alot,
bob

Spry horizontal menu alignment problem

There is an issue I am dealing with that is causing problems.
I am trying to avoid having the borders double up in thickness, anywhere within the menu.
I have achieved this by using the left and bottom border everywhere I can and then adding class or id tags where appropriate and adding my own top and right borders.
Works fine everywhere except at the top of the dropdown section of the submenus where it connects with the main horizontal menu.
I would like that top box of the submenu to align perfectly with the main horizontal menu bar so that there is a clean single pixel line.
A clean contiuous line around all menu objects.
When I add a top border on that top box of the submenu, I can adjust the placement a little but it always seems to either over ride the main horizontal menu, which causes me to either lose the border or double up on it.
if I have a border completely around both the horizontal menu and the submenu, then when I align them so that the borders sit on top of each other, I get an artifact at the corners of the lines that appear as a gap. It is NOT clean.
I can edit the position of the submenu in the CSS code below, I have done this with the margin-top statement. I have adjusted that between 0 and -1, and will inlcude images of the problem. Hopefully this will work.
I want a very clean continous line around the menu boxes that does NOT leave gaps, does NOT double up in thickness or leave any strange looking artifacts anywhere.
Any help would be greatly appreciated!
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
margin-top: 0px;
    margin-left: 0px;

Posting screenshots only demonstrates the problem. For anyone to troubleshoot it for you, they need to see the actual menu. Upload the problem page to a public website, and post the URL here. Then someone can have a look at it for you.

Spry Submenu in IE not displaying correctly and appears way out of position

I have used a horizontal spry menu with submenu's
(www.nationalbartender.co.uk). Everything works fine except for in
IE the submenu's look different and they dont hover over everything
else. Instead they move the content down the page to make room and
appear horizontally across the page instead of underneath each
other. A nightmare thats taking ages to sort. If anybody can take a
quick look at the site. Maybe view it in Safari and then in IE and
offer any guidance I would appreciate it! cheers.

I haven't been able to get my site posted up yet. Here is a link to it anyway:andrearosales.com
I will be working on connecting my files up to my server. At the moment, here are some screen shots of some messages that I am getting when I am saving my file.
I'm not sure what to make of these messages. I tried to put a new spry horizontal menu bar on my main page, and when it appeared, it displayed as a spry vertical menu bar.
Here is a picture of what it looks like:
I"m going to refer to the links that were suggested to me though. I'm not sure if pictures of the code will help to solve my problem. I'm going to try again to connect my files to my server though.

The spry horizontal submenu appear on top of screen in IE

why is it that in IE the spry submenu is opened on the top of the screen and not below the menu and how can this be fixed...i have used dreamweaver CS3 and found this to be a major issue but cannot find an answer to it?

In its original form, that is straight out of the box and
unadulterated, the SpryMenuBar is a very well behaved animal. It is
only when a budding web developer starts to mistreat it, it will rear
its ugly head.
So
the answer to YOUR major issue is kill this version of SpryMenuBar off
and start again with a new version. This time make your changes where
you can can see them and keep track of them, meanwhile testing your
markup in your favourite (IE) browser at each step.
I hope this helps.
Ben
Yes I did... but not without your help! Thank you for looking and your response! I did exactly what you said and then some.
I created a new directory with a test html and a new SpryMenuBar and SpryAssets sub-directory. Then I opened up the original version of the SpryMenuBarHorizontal.css file and began to compare it side by side with my already customized SpryMenuBarHorizontal.css by cascading the two windows vertically within DW-CS3... got that idea here I think too...
This way I could see my mistakes and eventually "fix" what went wrong.
One thing extra I had to do was add a new property ( min-height: 30px; ) to the "... a" rule that accommodated for IE7 and down as well as IE8 "Compatibility View" (which was forcing itself to run when I visited my site ???)... the change I added kept my block display from becoming too low and allowing an unwanted transparency in the list between "Items". That's the best I can describe it... ...here is the example below.ul.MenuBarHorizontal a
    display: block;
    cursor: default;
    background-color: #EEE;
    color: #006699;
    text-decoration: none;
    line-height: 30px;
    text-indent: 10px;
    font-weight: bold;
    min-height: 30px;
I don't know exactly where I went wrong but thanks to Ben's previous reply, I was able to put the puzzle back together again... no sweat !
Thank you Ben, Adobe DW and Spry !!!

MenuBar submenu shows up way right in IE

Please Please help. I am using the horizontal menu barwith 2
submenu levels.
I have searched the forum and can't find the fix that works.
I loaded the 1.5 .js file, but it didn't fix it.
You can see the site at
adshapiro.com/test
The CSS is located in the Spry folder....
I am still looking for the fix on the forum but if you know
how to fix this let me know

Got my to work - found this in the samples
add this to your styles
<style type="text/css">

</style>
Worked for me

Spry horizontal menu's not displaying right in IE9

Presently I'm using Dreamweaver CS4. I have built a web site and placed a horizontal spry menu at the top of the web page. It is situated on the page just below a smaller non-spry horizontal menu.    In IE9, the menu appears above and to the right of this smaller menu rather than in the location I want it to appear. What's more, in Dreamweaver the menu seems to float the upper right of the screen (I've attached a screen shot).   When I review the web site in IE 7, Firefox, Chrome, Opera, and Safari, the menu is correctly placed.
Can anyone help solve this issue? When I view the web page in IE9 and put it into IE7 mode, all is well. Not so in IE9 (or IE8 for that matter).
I'd appreciate direct email as well as answering it here to help others with my quandry. My direct email address:   [email protected].
Thank you!
This image shows you where the menu appears in Dreamweaver AND in IE9
This image shows you where the menu correctly displays in IE 7 (standard mode), Chrome, Firefox, Opera, and Safari.
The smaller navigation you see "Subscribe to Alerts" etc is controlled by the following code:
#secondarynav {
width: 475px;
margin: 0px 0px 0px 0px;
padding: 0px;
float: right;
/* height:20px; */
The entire page including these menus sits in a container (My Code):
#container {
width: 930px;
height:800px; /* changed from 775px */
margin: 0 auto;
border:1pt solid #c7a9a9;
background-color: #FFFFFF; /* added by WDM, 6/5/2012 to keep container white while page body is gray */
Control for Menu Bar: (My code)
#menubar1 ul{
          z-index:5000;
          margin:40px 20px 0px 0px;
LAYOUT INFORMATION: describes box model, positioning, z-order (Dreamweaver Code)
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
/* margin: 0; */
    margin:-45px 0px 0px 200px;
    padding: 0;
    list-style-type: none;
    font-size: 10pt; /* change from 100%, 12pt */
    cursor: default;
    width: auto;
    float:left;
          z-index: 5000;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 9pt; /* change from 100%, 12pt */
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 15em; /* change from 8em */
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 10pt;   /* change from 100%, 12pt */
    z-index: 1020;
    cursor: default;
    width: 13.0em;   /* change from 8.2em/14.2 */
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 14.2em;   /* change from 8.2em/14.2 */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 170px; /* change from -5% 0 0 80%; */
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;

I'm not sure where you attached files (I have not seen a way to do that in the Forum), But I will try to speak generally and work with what you have posted.
My suspicion is that the negative top margin you have applied is messing things up a bit.
I also note that it is usually better to apply margins to a CONTAINER of an unordered list (which is what menus are made of), than to apply the margins to the ul itself. So, restore the margin: 0; to the ul.MenuBarHorizontal style selector and create an enclosing element that bears the margin:-45px 0px 0px 200px; though I would still reconsider the use of negative top margin.
It is entirely possible that this simple change will help.
Please post the HTML for the top of the <body> section, including the menu code.
Beth

CS5.5 Floating Spry submenu

I know enough to be dangerous and I belive that s what has happened in this case. I have created a simple page in Dreamweaver CS5.5 and have inserted a Spry horizontal menu into a div on the page. I have begun styling the menu and submenus and have evenrything dilaed in with one exception, the submenu's "float" with about a 1px white line between the menu and submenu. I am unable to figure out how to remive this issue so that the submenu's marry to the menu. Thanks. I look forward to your replies.

AG,
Thank you for your response. I reviewed the commandments and do not beleve that I have broken any of them. You will see that I added a few items for the submenu styling as I wanted to customize the width of the submenus from one mnu bar item to the other for asthetic/style reasons I have attached the Spry code and html that corresponds to the menubar. I read another thread that suggested it could be because the div i have the Spry embedded in has "relative" positioning defined. However if that is the case I have no idea how to keep the menubar where I want it which is positioned between 2 other divs.
Spry CSS:
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
          padding: 0;
          list-style-type: none;
          font-size: 18px;
          cursor: default;
          width: 41em;
          font-family: "Myriad Pro", Arial, Helvetica;
          text-align: center;
          margin: 0 auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarHorizontal
ul li{
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: center;
          cursor: pointer;
          width: auto white-space
: nowrap;
          float: left;
          width: auto;
          white-space: nowrap;
/* 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: 14px;
          z-index:1020;
          cursor: default;
          width: 19em;
          position: absolute;
          left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          float: none;
          width: 19em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal a.MenuBarItemHover ,ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          border: 0px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          padding: 0.5em 0.75em;
          color: #FFF;
          text-decoration: none;
          text-align: center;
/* 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:;
          color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color:;
          color: #45a200;
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 ul a.MenuBarItemSubmenu3
          background-image:;
          background-color: #0526ea;
          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:;
          background-color: #0526ea;
          background-repeat: no-repeat;
          background-position: 95% 50%;
          width: 18em;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu1
          background-image:;
          background-color: #0526ea;
          background-repeat: no-repeat;
          background-position: 95% 50%;
          width: 7em;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu2
          background-image:;
          background-color: #0526ea;
          background-repeat: no-repeat;
          background-position: 95% 50%;
          width: 5em
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu3
          background-image:;
          background-color: #0526ea;
          background-repeat: no-repeat;
          background-position: 95% 50%;
          width: 11em
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu4
          background-image:;
          background-color: #0526ea;
          background-repeat: no-repeat;
          background-position: 95% 50%;
          width: 12em
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu5
          background-image:;
          background-color: #0526ea;
          background-repeat: no-repeat;
          background-position: 95% 50%;
          width: 9em
/* 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-repeat: no-repeat;
          /* [disabled]background-position: 95% 50%; */
          color: #FFF;
          background-color:;
/* 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:;
          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: relative;
          z-index: 1010;
          filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;
HTML:
#titlebar {
          background-image: url(../Images/title-bar.png);
          height: 120px;
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
body {
          background-image: url();
          background-color: #FFFFFF;
#menubar {
          font-size: 14px;
          text-align: left;
          height: 40px;
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
          background-color: #0526ea;
#container {
          font-family: "Myriad Pro", Arial, Helvetica;
          font-size: small;
          height: 600px;
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
          background-image: none;
          background-color: #FFF;
#footer {
          font-family: "Myriad Pro", Arial, Helvetica;
          font-size: x-small;
          background-image: none;
          height: 10px;
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
          text-align: center;
          color: #0627ef;
#bottomnav {
          font-family: "Myriad Pro", Arial, Helvetica;
          text-align: center;
          height: 15px;
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
          font-size: small;
          color: #0627ef;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


<style type="text/css">
a:link {
          color: #0627ef;
</style>
</head>
<body>
<div id="titlebar"></div>
<div id="menubar">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Home</a>
      <ul>
        <li><a class="MenuBarItemSubmenu1" href="#">About Melissa</a></li>
        <li><a class="MenuBarItemSubmenu1" href="#">Contact Melissa</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#" >Workshops</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Basic Workshop - The Way of the Shaman</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Shamanic Extraction Healing Training</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Shamanism, Dying, and Beyond</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Shamanic Divination Training</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Shamanism and the Spirits of Nature</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Shamanic Dreamwork</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Shamanic Training in Creativity</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Books</a>
      <ul>
        <li><a class="MenuBarItemSubmenu2" href="#">Books</a></li>
        <li><a class="MenuBarItemSubmenu2" href="#">CE Courses</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Shamanic Healing</a>
      <ul>
        <li><a class="MenuBarItemSubmenu3" href="#">Divination</a></li>
        <li><a class="MenuBarItemSubmenu3" href="#">Extraction</a></li>
        <li><a class="MenuBarItemSubmenu3" href="#">Power Animal Retrieval</a></li>
        <li><a class="MenuBarItemSubmenu3" href="#">Psycopomp</a></li>
        <li><a class="MenuBarItemSubmenu3" href="#">Soul Retrieval</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Melissa Recommends</a>
      <ul>
        <li><a class="MenuBarItemSubmenu4" href="#">Articles</a></li>
        <li><a class="MenuBarItemSubmenu4" href="#">Books</a></li>
        <li><a class="MenuBarItemSubmenu4" href="#">Videos</a></li>
        <li><a class="MenuBarItemSubmenu4" href="#">Websites</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Testimonials</a>
      <ul>
        <li><a class="MenuBarItemSubmenu5" href="#">For Books</a></li>
        <li><a class="MenuBarItemSubmenu5" href="#">For Shamanic Healing</a></li>
        <li><a class="MenuBarItemSubmenu5" href="#">For Workshops</a></li>
      </ul>
    </li>
</ul>
</div>

Spry Horizontal Menu Submenus Won't Appear - Help

OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal {      margin: auto;      padding: 0;      list-style-type: none;      font-family: "Times New Roman", Times, serif;      font-size: medium;      font-weight: bold;      cursor: default;      width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive {      z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      position: relative;      text-align: center;      cursor: pointer;      width: 108px;      float: left;      } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul {      margin: 0 0 0 50%;      padding: 0;      list-style-type: none;      font-size: 80%;      z-index: 1020;      cursor: default;      width: 108px;      float: none;      position: absolute;      left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {      left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      margin: -5% 0 0 95%;      z-index:1030; } /* 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: none;      top: 0;      z-index:1040; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul {      border: 1px solid #CCC;       } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #000;      padding: 5px 5px;      color: #FEFEFE;      text-decoration: none;       } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      background-color: #323232;      color: #FEFEFE; } /* 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: #323232;      color: #FEFEFE; } /******************************************************************************* 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;      filter:alpha(opacity:0.1); } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection {      ul.MenuBarHorizontal li.MenuBarItemIE      {           display: inline;           f\loat: left;           background: #FFF;      } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body {      font-family: Verdana, Geneva, sans-serif;      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */      padding: 0;      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */      }       .twoColFixLtHdr #container {      width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */      margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */      border: 2px solid #000;      text-align: left; /* this overrides the text-align: center on the body element. */      }       .twoColFixLtHdr #header {            padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */      border: 0px solid #000;             } .twoColFixLtHdr #header h1 {      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */      padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */       } .twoColFixLtHdr #sidebar1 {      float: left; /* since this element is floated, a width must be given */      width: 200px;      font-size:12px;      color:#FEFEFE;      background: #000;      border-top-width: 1px;      border-right-width: 2px;      border-bottom-width: 2px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #000;      border-right-color: #660000;      border-bottom-color: #000;      border-left-color: #000;      padding-top: 1px;      padding-right: 0px;      padding-bottom: 1px;      padding-left: 1px; } .twoColFixLtHdr #mainContent {      margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */      background:#660000;      } .twoColFixLtHdr #videomainContent {      margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      background: #323232;      padding-left:100px      } .twoColFixLtHdr #singleframe {      background: #323232;      }       .twoColFixLtHdr #footer {      padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */      font-size:12px;      color:#FEFEFE;      background:#000;      border: 1px solid #000;            } .twoColFixLtHdr #footer p {      margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */      padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */      clear:both;     height:0;     font-size: 1px;     line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover {      text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{     color:#4C0000;} .w1{font-size:14px;     color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{      float: left; /* since this element is floated, a width must be given */      width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */      padding: 0px 0px 0px 0px; }       .b{font-size:12px; color:#000000; } .topbtmmargin {      margin-top: 20px;      margin-bottom: 20px; } .SidebarPadding {      padding-top: 0px;      padding-right: 10px;      padding-bottom: 0px;      padding-left: 10px; } .FrontImage {      border: 5px ridge #323232;      float: left;      margin-right: 10px;      margin-bottom: 10px;      margin-top: 0px; } .FrontImageFltRgt {      border: 5px ridge #323232;     float: right;      margin-left: 10px;      margin-bottom: 10px;      margin-top: 20px; } .mapRgt {      float: right;      padding-left: 5px;      padding-bottom: 10px;      border: none;       } .sigRgt {      float: right;      padding-left: 5px;      margin-right: 60px;      padding-bottom: 10px;      margin-top: 10px;       } .textfntrgtcol {      padding-left: 200px;      font-size:12px;      color:#000000; } .textfntlftcol {      padding-right: 210px;      font-size:12px;      color:#000000; } .twoColFixLtHdr #container #mainContent ul li {      list-style-type: none;      list-style-position: outside;      list-style-image: url(images/blackbullet.gif); } .leftpicture {      border: 5px ridge #323232;      position: absolute;      z-index: 20;      height: 140px;      width: 180px;      margin-top: 10px;      margin-right: 10px;      margin-bottom: 10px;      margin-left: 210px;      left: 150px;      top: 326px; } img {      border-style: none; } .grooveimg {      border: groove; } #apDiv1 {      position:absolute;      width:200px;      height:115px;      z-index:1;      left: 0px;      top: 0px;      visibility: visible; } #apDiv2 {      position:absolute;      width:155px;      height:123px;      z-index:2;      left: 5px;      top: 4px;      visibility: visible; } #apDiv3 {      position:absolute;      width:335px;      height:122px;      z-index:3;      left: 173px;      top: 3px;      visibility: visible;      color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 {      position:absolute;      width:120px;      height:45px;      z-index:4;      left: 390px;      top: 105px;      visibility: visible; } #apDiv5 {      position:relative;      width:200px;      height:115px;      z-index:5; } .menubarWrapper {      background-color: #000;      float: left;      width: 100%; }

Move the constructor for the menu bar up to read as follows
<script type="text/javascript">

</script>
Gramps

Spry horizontal menu: submenu background problem in IE7

Hello,
I am using the Spry horizontal menu in this website: http://www.isis-papyrus.com
It works perfectly on all current version browsers, but in IE7 the white submenu background only shows behind the actual text for each link and not to the border of the submenu box.
I modified the css to allow for dynamic sizing for each submenu (see below).
Any suggestions would be greatly appreciated.
Best, Oliver
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
    float: none;
background-color: transparent;
    color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* 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: #fff;
color: #339999;
/* 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: #339999;
color: #fff;
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Thank you so much for your quick answer Beth!
You solved half my problem!
I added the bg-color to the li and ul styles of the submenus (css below) and now the white background shows correctly in IE7.
The only thing I still would like to resolve: The hover style for the menu items (inverse bg and text colors) only works for the actual text of the link and not for the entire width of the submenu box.
Any suggestions?
Thank you again.
Best, Oliver
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100%;
clear:left;
    float: none;
background-color: #fff;
     color: #fff;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 100%;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #339999;
background-color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.4em 0.8em;
color: #339999;
text-decoration: none;
white-space: nowrap;
/* 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: #fff;
color: #339999;
/* 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: #339999;
color: #fff;
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Renegade Spry submenu & sub-submenu tabs in IE7

In IE7, submenu tabs for a Spry horizontal menu open at the
top of the page, not adjacent to the menu tabs. Sub-submenu tabs
open at the far right, out of the visible page. No problems in
Firefox
Site is
http://www.broadwaterllc.com/Pages/about.html
Relevant code (admittedly sloppy, but this is my first
attempt) is:
<div align="center" class="style3 style6 style7">
<div align="right"><a href="#"
class="MenuBarItemSubmenu">Transactions</a>
<ul>
<li><a href="recenttransactions.html">Recent
Transactions</a></li>
<li><a href="Transactions.html">All
Transactions</a></li>
<li><a href="#"
class="MenuBarItemSubmenu">Transactions by Segment</a>
<ul>
<li><a href="newspapers.html">Newspaper
Publishing</a></li>
<li><a href="books.html">Book
Publishing</a></li>
<li><a href="eduprof.html">Educational &
Professional</a></li>
<li><a href="B2B_BIS.html">Business Media
& Information</a></li>
<li><a href="Digital.html">Digital
Media</a></li>
<li><a href="Misc.html">Other
Transactions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>
Thanks in advance

The best thing to do is to start a new page. Add a menu bar
to it. Set it up the way you need it. Then make a copy of the DW
generated CSS. Then open the non copy virsion. Inside you will see
a lot of comments that tell you what each is doing. It will also
point out the IE bug fixes. P.S. some are in the html code as well.
Work with this copy until you have it looking the way you want it
in the web browsers. Then copy and past it over your live copy on
the server. Use the back up if you make a change you do not like
and can not remember how to fix. Remember to do one or two changes
at a time. Then test.

Weird Spry Submenu Effect in Internet Explorer

It looks like the first category item of a Spry submenu is stretching vertically to the same length of the Spry sub sub menu to the right. It works fine in Safari and Firefox. It is only doing this in IE 8 on a pc
Any idea why this might be happening?
Go here to see a photo of it.
http://www.advservices.biz/newsite/Photo015.jpg
To check out the site itself, go here
http://www.advservices.biz/newsite/newsiteindex.html
Thank you!

I am not sure if the following is the cause of the problem but try 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;
     ul.MenuBarHorizontal ul li.MenuBarItemIE
          display: inline;
          f\loat: left;
The second set of rules should be deleted.
I hope this helps.
Ben

Spry submenu position !

I'm new to dreamweaver and I decided to use spry menu (vetical) for the first time .
the problem is I want to set it on the right , therefor I need to make submenues appear to the left and not to default right !
which code should I modify ?

Hi,
The position of Spry Menu Bar submenus is controlled by the margin property    on submenu ul tags.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the margin: -5% 0 0 95%; default      values to the desired values.
Try
ul.MenuBarVertical ul
    margin: -5% 0 0 -95%;
I hope this helps.
Ben

Spry submenu problem in IE7

Hi everyone,
I am having a problem with Dreamweaver CS3 where the spry
horizontal menu's submenus shift over to the right and level with
the bar rather than dropping down as a submenu should. This only
happens in IE7 however, not in Firefox or any other browser I have
tried. The website is
http://www.daytonlifepurpose.org/homePage.html
I tried the spry 1.5 js file "fix" but had no luck. Any help
at all would be greatly appreciated! Thanks!

Hi everyone,
I am having a problem with Dreamweaver CS3 where the spry
horizontal menu's submenus shift over to the right and level with
the bar rather than dropping down as a submenu should. This only
happens in IE7 however, not in Firefox or any other browser I have
tried. The website is
http://www.daytonlifepurpose.org/homePage.html
I tried the spry 1.5 js file "fix" but had no luck. Any help
at all would be greatly appreciated! Thanks!

Spry submenu appears way right in IE on horizontal menu

Similar Messages

Maybe you are looking for