Submenu's not showing up in IE7

I just finished a site with pull-down menus that I modified
somewhat from Spry. The sub-menu which is under the link "Services"
works great in Safari and FF but does not work at all in IE7. A few
people have pointed out some CSS conflicts that showed up in the
CSS validator, but they don't seem to relate to this problem. The
site is www.liveandlearn-usa.com
Thanks once again.....

Part of the sub menu does show up if you hover over it but is
obscured by the photo just below it. Have you tried changing the Z
index of the photo or the menu?
I'm using IE7 in windows. It works fine in Safari. There is a
css bug in IE7 that changes the Z index - I had the problem earlier
this week.
See
http://aplus.rs/css/ie7-bug-will-not-render-z-index-change-on-lihover/
or enter Z index change bug into Google.
Howard Walker

Similar Messages

PNG pictures not showing up in IE7 after Quicktime Install

I am having a problem on my Vista box. PNG images are not showing in IE - not on any website since installing Quicktime.
It seems this has something to do with Apple's Quicktime. I have gone to MIME and File Assoc. settings in Quicktime and set the images to open on the machine with Photoshop - this works fine. But when I try to view a PNG on the web I get the "red X" image not found.
I have tried this registry fix: http://www.winhelponline.com/articles/202/1/, But it does not work and gives an error.
Also, when I try to open an PNG in IE locally on my machine it's using Quicktime to try and open the file. Example: When calling this image on my machine via IE, Quicktime is opening this png file instead of simply showing the file in the browser.
C:\Users\neal\Web Sites\images\cancel_f2.png
I am also including links to screen shots from a program called MIME View which obviously shows how Quicktime seems to have 'hijacked' PNG images??? I am also including a screen shot of the settings for a jpg, which I assume should be about the same for a PNG.
PNG: http://www.nealwhitley.com/png-properties.jpg
JPG: http://www.nealwhitley.com/jpg-properties.jpg
Any thoughts? Is this a registry problem? Any fixes? Is this a Vista issue?
Thanks,
Neal

I just sent this on to Apple QuickTime for Windows support feedback. I lost 'png' in Windows Vista Home Premium IE7 Browser unless I 'right click' IE7 Icon and 'run as administrator' after installing QuickTime Pro with iTunes on a new Dell desktop. From what I find in on-line forums QuickTime for Windows has been doing this in Internet Explorer for quite some time, I tried the same .zip file you tried with no completion in 'merge'... It appears to be a 'bug' from Apple, let''s hope they can offer a 'fix'...
03/10/07 new in the box Dell Dimension E521 desktop Windows Vista Home Premium OS installed. After I downloaded iTunes with QuickTime I noticed Internet Explorer 7 could not display 'png' images. I have QuickTime 7.2 with iTunes installed and stay current on Apple for Windows updates. After many hours of research on-line Windows support forums I discovered something in 'MIME' QuickTime application associates 'png' to QuickTime only and I get the annoying 'red x' appearing at any and all[right click properties] 'png' images. I contacted Dell warranty support about this matter without a 'fix' other than assuring me it was associated with a glitch in 'QuickTime for Windows'. In my Control Panel at QuickTime Icon there is no access to correct or alter this MIME 'png' association in Vista. I found if I 'right click' IE7 Icon and 'run as administrator' The browser opens very slow, but now 'png' images appear. They also do clearly appear in Mozilla Firefox alternative Browser on this PC. I'm quite certain Apple knows about this matter and has been receiving support questions concerning restoration of IE7 'png' images which seem to occur when QuickTime is installed. Since this is a QuickTime for Windows issue, can there be an adjustment in future QuickTime updates to address this sad state of affairs? I have tried Internet Options 'reset IE7' I even tried a 'system restore' on this brand new PC, experiencing this 'bug' issue related to QuickTime MIME 'png' images should best be addressed by Apple since Microsoft seems to offer no working solution short of re-installing the Vista OS, but installation of QuickTime for Windows would only cause it to happen again... Can you refer this matter to QuickTime for Windows Department for advice, maybe corrective measures in future updates?
Your assistance is greatly appreciated, I wouldn't be on-line without iTunes and QuickTime, let's see if we can get the 'red-x' out. Thank you!

Submenu is not showing up in the main menu

hey need help asap!!! The child page is not showing up with the parent page how can I fix this?

Hi,
Could you please check in the Menu, if you have selected Menu type-> All Pages, Selecting Top level pages will hide Child pages from the menu.
Hope This Helps.

Spry submenu not showing up on IE6/IE7/firefox

The Horizontalmenu Spry is working good when I create it as a
blank html page. But when I created spryheader as a template, the
submenu is not showing up on hover on IE and firefox. Wonder if its
a z-index problem.
Using spry 1.6.1
Did anybody face the same problem and found a solution?
Working URL (simple html page) : www.ciitech.net/next1/
Templated page :
http://www.ciitech.net/next2/Templates/ciiheaderfooter.dwt

Maybe you tweaked something, but it shows up in Firefox 3 and
IE7 for me. In IE7 though, the menus don't drop straight down, but
I think that might have to do with the widths you have set for you
menu items, but not certain.

SUB SUB Menus Not Showing In IE

For the first time I put a sub, submenu (if that is what you call it) in my Spry Menu and it does not show in IE. Firefox it works fine, but IE it does not show up. The main item on the menu bar is there, then when you scroll over this main item, its submenu shows, but then when you scroll over this submenu, it's sub submenu does not show in IE.
Anyone know how to resolve this problem and make it show up? Many thanks.
Blake

Well, I figured out where the problem is. It has to do with the filter: alpha(opacity=92) in the following section of code:
/* 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: 8.2em;
    position: absolute;
    left: -1000em;
/* for IE */
filter:alpha(opacity=92);
    /* CSS3 standard */
opacity:0.92;
If I remove the opacity, then the level 2 submenu shows up, but then the opacity is gone. I would like to keep the opacity. Trying to figure out what I can do now to keep the opacity and have level 2 submenus show in IE as well. Any ideas?

Image only viewable in Safari. Does not show in Firefox 3.0 (OS/Windows), IE7&8

I used an index template .dwt and inserted a logo header image.
Using Browser lab it renders in Safari but not in Firefox 3.0 for both OS/Windows, IE 7&8, and Chrome.
     Using FILE-->VIEW IN BROWSER, which is Safari it is fine.
          A friend used FIrefox and IE7 and the image did not show or same results as Browser Lab.
Orginial code:   <div class="header"><img src="../pictures/logo_header.jpg : Safari good, other browsers did not show image
2nd try: Code: src="/~sanchezg/pictures/logo_header.jpg", This time Safari did not show header image either.
Location: www.unm.edu/~sanchezg
From PROPERTIES--> SRC --> BROWSE FOR FILE
URL: ../pictures/logo_header_jpg
Relative to: Document      : index.dwt
Selecting 'Change default Link Relative To in the site definition:
     Default Images folder: /User/xxxxx/Sites/GabeSanchezFIles/Pictures
     Links relative to: Document is selected
        Web URL: http//www.unm.edu/~sanchezg
What are your thoughts?
Thank you

I'm troubled by these answers because they seem to further muddy the water. Here's the important concept -
All links in the TEMPLATE file should be one of three kinds -
1. Relative to the template file, e.g.,
<a href="../ (meaning that you must go up one level from the template folder
to reach the root of the site, hence all other files, since none of them
should be in the templates folder)
2. Relative to the site root, e.g.,
<a href="/ (meaning that one would begin looking for the linked file at the
root of the site and follow the pathing from that point)
3. Absolute, e.g.,
<a href="http:// (meaning that the link is to a page external to the site).
Seems that none of the suggestions are putting you on that path first.

Header not showing up in Firefox (but OK in IE7)

Hello everyone.
I'm hoping someone can help me with this situation. I'm
having a problem with my header sometimes not showing up in Firefox
2.0 (I'm using 2.0.0.13), yet it shows up fine in IE7. The problem
is intermittent, sometimes it displays as it should and other times
it's not there (the header is a JPG, 1000x125 pixels, around 25k in
file size). Sometimes clicking the "Go" button will make it appear
(other times not) and sometimes "refresh" will do the same or make
it "disappear" if it's already there. I'm using DW MX 2004 and I
don't remember having this problem before until just recently on
some pages that I made from scratch. Here is an
example of one of
the pages. So far it's a pretty simple layout using a table, a
header and a few horizontal buttons.
If it the header shows up in Firefox, please refresh or
reload and see if it no longer shows up.
I'm wondering if I should be doing something else in DW for
the header so that it will show up every time in Firefox. I can
post the code if I need to, or you can view it when you visit the
page.
Can someone please help?
Thank you

> @josie1one, can I ask what OS you are using? I'm not
sure if it matters,
> but
> I'd be curious to know with my results from using XP and
Win98.
WinXP Professional.
> @Dooza, It IS very confusing, ha ha. My viewing
>
http://www.beatleslane.com/zhtz/header01.jpg
works fine on my end.
>
http://www.beatleslane.com/header01.jpg
should NOT work because there's no
> such
> file in that location.
Not Dooza but you say without /zhtz/ it shouldn't work but
your code is:
<td height="125" colspan="5"><img
src="header01.jpg" alt="header"
width="1000" height="125"></td>
Note no /zhtz/ ??? Did you try what I suggested? Just for
laughs?
Jo
"CreativeSpurt" <[email protected]> wrote in
message
news:ftg0ge$p$[email protected]..
> @josie1one, I know what you mean by "It won't reappear
at all for me now.
> Fine
> in IE6 oddly". Sometimes I can't make it reappear in FF2
either, yet no
> problems in IE7.
>
> My main computer is a Win XP Home Ed., and it's the
computer I'm having
> this
> header issue with. As I mentioned, I tried it on a Win98
(with FF2) and I
> didn't have a problem (in limited testing). I just now
tried it on an old
> Win98
> laptop (also with FF2) and no problems there either. So,
the problem seems
> to
> only appear with my XP computer using FF. No problems
with NN9 or IE7 or
> Win98.
> And it sounds like josie1one has the same issue as me
viewing the page, so
> it's
> not just me.
>
> @josie1one, can I ask what OS you are using? I'm not
sure if it matters,
> but
> I'd be curious to know with my results from using XP and
Win98.
>
> @Dooza, It IS very confusing, ha ha. My viewing
>
http://www.beatleslane.com/zhtz/header01.jpg
works fine on my end.
>
http://www.beatleslane.com/header01.jpg
should NOT work because there's no
> such
> file in that location.
>

IE7 not showing pop up menu

I made a drop down pop up menu using behaviour in DW8, while
it display correctly in IE6, Opera and Firefox, the menu could not
be displayed in IE7. Please help me fix the problem. The website is
www.trcollege.net.

Read this -
http://www.losingfight.com/blog/2006/08/11/the-sordid-tale-of-mm_menufw_menujs/
There are much better and more suitable ways to do these
menus -
Check the uberlink and MacFly tutorials at PVII -
http://www.projectseven.com/
and the Navbar tutorial/articles at Thierry's place
http://tjkdesign.com/articles/dropdown/
Or this one (more recent article):
http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp
Or to get it done fast, go here -
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Aiwam" <[email protected]> wrote in message
news:flpo4f$pmj$[email protected]..
>I made a drop down pop up menu using behaviour in DW8,
while it display
> correctly in IE6, Opera and Firefox, the menu could not
be displayed in
> IE7.
> Please help me fix the problem. The website is
www.trcollege.net.
>

Spry Horizontal menu bar borders not showing in IE6/IE 7 but ok in Mozilla!

I am hoping someone can help me! I have built a spry menu
with CS 3 and have altered the CSS file to customise colours etc.
the problem I am encountering is that I have specified white
borders around the menus items and sub menus which look perfectly
fine in Mozilla Firefox but when I check IE 6 & 7 the borders
have disappeared! I am hoping someone you may have a workaround or
any reason this might happen.
this is 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
margin: 0;
padding: 0;
list-style-type: Arial, Helvetica, sans-serif;
font-size: 90%;
cursor: default;
width: 800px;
/* 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: 100px;
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: 8.2em;
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: 8.2em;
/* 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;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 0.5px solid #FFFFFF;
border: 0.5px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #b7a66d;
border: 0.5px solid #FFFFFF;
padding: 0.5em 0.5em;
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: lowercase;
/* 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: #c8bb89;
border: 0.5px solid #FFFFFF;
color: #FFFFFF;
/* 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: #c8bb8;
border: 0.5px solid #FFFFFF;
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: left;
background: #FFF;
.Nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

I am having the same problems in IE7. I'm using the latest
version of everything (Spry 1.6.1 and javascript file version 0.12)
and at first I was having the problem on my drop down menus
appearing horizontal with all the correct styles but when I changed
the rule ul.MenuBarHorizontal ul to position: relative; the drop
downs appear vertical now but I have no beige border around the
whole ul anymore and I'm getting white space inbetween list items.
http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
so if anyone has any advice I'd much appreciate it. Also i'm
using 1px width on my borders no decimals.

Drop down boxes do not show up. My tabs are not visible. I could barely see the box to type in this question. Something is off. I deleted and reinstalled program it is still just floating words. I work on a Mac with ox 10.6.8

The browser boxes, tabs, and links do not show up with the needed outlines, colors, and shapes. This box I am typing in was barely visible. Above this box is a set of two verticle parallel bars. When I moused over it, I saw it was for inserting a link, but if I had not been curious I would not have known what those lines were for. When I look at this page on PC I have a colored blue backdrop. It is not visible on the Mac. The search box does not have the image of the magnifying class and the arrow does not show up where it should be. The words Post Question just appear below the statement we have made some educated guesses about your browser. I thought maybe it had been a theme that was applied, but I do not see how it could have come on when I trashed the old version of the firefox.

A;though the CSS is very well documented, there are those that ignore those signs. Look at the following
/* 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;
The rest have been given a width of 15em, so this value may be a good start.
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
   width: auto;
    background-attachment: fixed;
Just keep the border property and remove the other two.
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;
          background: #FFF;
The following is the original for the above
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;
Cheers,
Gramps

Spry Menu Bar Submenu won't show in Safari or Dreamweaver LiveView

I am trying to get my submenu to show up on my website's spry menu bar. It will show up when I test the site using firefox or IE but it won't show when I try LiveView in Dreamweaver or when I test using Safari. The site is www.fuseut.com/fuse
Here are is the CSS for the menubar:
@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: 100%;      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: left;      cursor: pointer;      width: 125px;      float: left;      font-family: "MS Serif", "New York", serif;      overflow: 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: 50;      cursor: default;      width: 7em;      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: 7em; } /* 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: 0;      top: 0; } /******************************************************************************* 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;      padding: 0.5em 0.75em;      color: #FFF;      text-decoration: none;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;      text-align: center;      background-image: url(../menubgdefault.png); } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      color: #FFF002;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /* 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 {      color: #FFF002;      text-decoration: underline;      font-weight: bold; } /******************************************************************************* 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%;      background-color: #999; } /* 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 here is the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FUSE UT</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
<meta name="Keywords" content="fuse ut utk university of tennessee tommy jervis avery howard ross rowland angie sessoms sga campaign elections" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menubarparent" style="z-index: 20; position: absolute; overflow: visible;">
<div id="menubar" style="z-index: 10;">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">FUSE</a>      </li>
    <li><a href="senators.html" class="MenuBarItemSubmenu">Senators</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li><li><a href="executive.html">Executive</a>      </li>
    <li><a href="policy.html">Policy</a></li>
    <li><a href="organizations.html">Organizations</a></li>
    <li><a href="bios.html" class="MenuBarItemSubmenu">Bios</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
</ul>
</div>
</div>
<p>
<p>
<div id="apDiv1">
    <div id="apDiv4"></div>
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="265" wmode="transparent">
      <param name="movie" value="Components/CandidatesHomeSlideshow.swf" />
      <param name="quality" value="high" />
       <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="Components/CandidatesHomeSlideshow.swf" width="550" height="265" wmode="transparent">
        
        <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object><div id="HomeEvents">
      <p> </p>
      <p> </p>
      <div id="EventsXML">
        <div spry:region="event2">
          <dl spry:repeatchildren="event2">
            <dt>{date}</dt>
            <dd>{title}</dd>
            <dd>{location}</dd>
          </dl>
        </div>
      </div>
    </div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Sorry if it's something really basic...I'm a noob to web design.
Thanks!

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Spry Menu Bar Submenus Not Showing

Hi!
This is the first time I have ever used Spry .My Horizontal Spry Menu Bar Submenus are not working in ANY browsers whatsoever and I'm not sure whats wrong. My website is www.poor2chic.com. I have pasted a copy of my SpryMenuBarHorizontal.css as well as the .js code and the source code :
@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: 100%;
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: left;
cursor: pointer;
width: 8.55em;
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: 8.2em;
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: 8.2em;
/* 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;
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: #03C;
padding: 0.5em 0.75em;
color: #FFF;
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: #9D9DFD;
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: #9D9DFD;
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;
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;
.container .content h1 {
font-family: Arial Black, Gadget, sans-serif;
.container {
font-family: Arial;
.container .content blockquote blockquote blockquote blockquote h1 em {
font-family: Arial;
.container .content p em strong {
color: #B62C0A;
.container .content p em strong {
color: #000;
.JS CODE:
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
     (ua.match(/linux/i) ? "linux" :
     (ua.match(/mac/i) ? "mac" :
     ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
   document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
   if (typeof this[k] == 'undefined')
    var rollover = new Image;
    rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
   if (i > 0 && this.enableKeyboardNavigation)
    items[i].getElementsByTagName('a')[0].tabIndex='-1';
   this.initialize(items[i], element);
   if(Spry.is.ie)
    this.addClassName(items[i], this.isieClass);
    items[i].style.position = "static";
if (this.enableKeyboardNavigation)
   var self = this;
   this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
   if(this.hasClassName(this.element, this.verticalClass))
    this.element.style.position = "relative";
   var linkitems = this.element.getElementsByTagName('a');
   for(var i=0; i<linkitems.length; i++)
    linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
    menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
   this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
   menu.style.top = '';
   menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
   this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
   // this refers to the list item
   if(testNode == null)
    return false;
   if(testNode == this)
    return true;
   else
    return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
   var tmp = el;
   while (tmp != this.element)
    if (tmp == item)
     return;
    try{
     tmp = tmp.parentNode;
    }catch(err){break;}
   item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
   found = this.getElementForKey(opts, 'y', 1);
   break;
case this.downKeyCode:
   found = this.getElementForKey(opts, 'y', -1);
   break;
case this.leftKeyCode:
   found = this.getElementForKey(opts, 'x', 1);
   break;
case this.rightKeyCode:
   found = this.getElementForKey(opts, 'x', -1);
   break;
case this.escKeyCode:
case 9:
   this.clearSelection();
   this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
   //subopts
   this.mouseOver(listitem, e);
   break;
case 2:
   //parent
   this.mouseOut(opts[2], e);
   break;
case 3:
case 4:
   // left - right
   this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
   break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
        //stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
   clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
   var self = this;
   listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
   link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
   continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
   continue;
if (els[i])
   var tmp = rect(els[i]);
   if ( (dir * tmp[prop]) < (dir * ref[prop]))
    ref = tmp;
    found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
   if(isFirstEntry)
    camelizedString = oStringList[i];
    isFirstEntry = false;
   else
    var s = oStringList[i];
    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
   value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
   if (document.defaultView && document.defaultView.getComputedStyle)
    var css = document.defaultView.getComputedStyle(element, null);
    value = css ? css.getPropertyValue(prop) : null;
   else if (element.currentStyle)
     value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
   while (parent) {
    ret.x += parent.offsetLeft;
    ret.y += parent.offsetTop;
    parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
   ret.y -= doc.body.offsetTop;
if (el.parentNode)
   parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
   cas = parent.nodeName.toUpperCase();
   ret.x -= parent.scrollLeft;
   ret.y -= parent.scrollTop;
   if (parent.parentNode)
    parent = parent.parentNode;
   else
    parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponent
PORTION OF SOURCE CODE CONCERNING MENU BAR:
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
        <ul>
          <li><a href="about_us_about_our_story.html">Our Story</a></li>
          <li><a href="about_us_about_our_mission.html">Our Mission</a></li>
          <li><a href="about_us_about_our_president.html">Our President</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Products</a>
        <ul>
          <li><a href="in_production.html" class="MenuBarItemSubmenu">Bags</a>
            <ul>
              <li><a href="in_production.html">Backpacks</a></li>
              <li><a href="in_production.html">Purses</a></li>
              <li><a href="in_production.html">Wallets</a></li>
              <li><a href="in_production.html">Yoga Bags</a></li>
            </ul>
          </li>
          <li><a href="in_production.html">Hats</a></li>
          <li><a href="in_production.html">Hair Accessories</a></li>
          <li><a href="in_production.html">Necklaces</a></li>
        </ul>
      </li>
      <li><a href="in_production.html">Services</a></li>
      <li><a href="blog_page.html">Blog</a></li>
      <li><a href="policy_page.html">Policy</a></li>
      <li><a href="contact_us.html">Contact Us</a></li>
    </ul>

I just solved myself. Thank you to anyone who spent time to look at my question though. I really appreciate it.

Spry 2.0 menu not showing in IE8

I have a webpage with a horizontal and vertical Spry 2.0 menu on the page. Both menus work correctly in Firefox, Chrome, Safari, and IE9, but the vertical menu does not show at all in IE8. In addition in IE8 the browser scroll bar disappears when the vertical menu is added. The test page is http://www.njslom.org/001banner5.html
I am using CS5 and the Spry 2.0 Widget in an html template.
Any help at all would be appreciated.
[email protected]
Page code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>



<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
body {
background-color: #EBEBEB;
margin-top: 0px;
</style>
<script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#MenuPublic1 {
background-color:#F2F2F2;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
            MenuItem, and MenuItemLabel
            at a given level all use same definition for ems.
            Note that this means the size is also inherited to child submenus,
            so use caution in using relative sizes other than
            100% on submenu fonts. */
font-weight: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuPublic1FixedCentered br" rule bleow */
display:none;
.MenuPublic1LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1FixedLeft {
float: left;
width: 70em;
.MenuPublic1FixedCentered {
float: none;
width: 70em;
margin-left:auto;
margin-right:auto;
.MenuPublic1FixedCentered br {
clear:both;
display:block;
.MenuPublic1FixedCentered .SubMenu br {
display:none;
.MenuPublic1Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1 .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
#MenuPublic1 .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#F2F2F2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1 .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:#F2F2F2;
padding: 7px 28px 7px 28px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuPublic1 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
background-color:#F2F2F2;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuPublic1 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#F2F2F2;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1 .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1 .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
#MenuPublic1 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1 .SubMenuVisible {
background-color: #F2F2F2;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuPublic1.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
     and your personal taste.
     0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
     on MenuItemContainer and MenuItem on the parent
     menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
     the dropdown with the left of the menu item label.*/
z-index:10;
#MenuPublic1.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuPublic1 .MenuLevel1 .SubMenuVisible {
background-color: #F2F2F2;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuPublic1 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">

</script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuPublic1_2 */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
      and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuPublic1_2 so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuPublic1_2 {
background-color:#8ca7d2;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
            MenuItem, and MenuItemLabel
            at a given level all use same definition for ems.
            Note that this means the size is also inherited to child submenus,
            so use caution in using relative sizes other than
            100% on submenu fonts. */
font-weight: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuPublic1_2FixedCentered br" rule bleow */
display:none;
.MenuPublic1_2LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2FixedLeft {
float: left;
width: 175px;
.MenuPublic1_2FixedCentered {
float: none;
width: 175px;
margin-left:auto;
margin-right:auto;
.MenuPublic1_2FixedCentered br {
clear:both;
display:block;
.MenuPublic1_2FixedCentered .SubMenu br {
display:none;
.MenuPublic1_2Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1_2 .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
#MenuPublic1_2 .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#8ca7d2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1_2 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1_2 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1_2 .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#ffffff;
background-color:#8ca7d2;
padding: 6px 10px 6px 10px;
width: 175px;
.SpryIsIE6 #MenuPublic1_2 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1_2 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: italic;
background-color:#0066ff;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuPublic1_2 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1_2 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1_2 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1_2 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1_2 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#0066ff;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1_2 .MenuItemHover {
background-color: #cae9fd;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1_2 .MenuItemHover .MenuItemLabel{
background-color: #cae9fd;
color: #000000;
#MenuPublic1_2 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1_2 .SubMenuVisible {
background-color: #0066ff;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuPublic1_2.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
     and your personal taste.
     0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
     on MenuItemContainer and MenuItem on the parent
     menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
     the dropdown with the left of the menu item label.*/
z-index:10;
#MenuPublic1_2.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuPublic1_2 .MenuLevel1 .SubMenuVisible {
background-color: #0066ff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuPublic1_2 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
.text-white { color: #FFF;
</style>
</head>
<body>
<table width="950" border="0" align="center" cellpadding="7" cellspacing="0">
<tr>
    <td width="284" bgcolor="#0000CC"><strong class="text-white">Serving Municipal Government in <br />
New Jersey Since 1915</strong></td>
    <td width="305" bgcolor="#0000CC"><div align="center"><div align="center">    
<table style="background-color:#004d8c" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<form style="margin:0;" method="get" action="http://www.picosearch.com/cgi-bin/ts.pl">
<input type="hidden" name="index" value="520788" />
<table style="background-color:#004d8c" cellspacing="2" cellpadding="0" border="0">
<tr><td><a href="http://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=allhttp://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=all"></a></td>
<td align="right"><input type="text" name="query" value="" size="20" />
<input type="submit" value="GO" name="search2" /></td>
</tr>
</table>
</form>
</td></tr></table>
<span style="white-space: nowrap;">
</span></div></div></td>
    <td width="319" bgcolor="#0000CC"><div align="right" class="text-white"><a href="http://www.njslom.org" class="text-white"><strong>HOME</strong></a> | <a href="http://www.njlmef.org" class="text-white"><strong>NJLM Educational Foundation </strong></a></div></td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
    <td width="135"><img src="/images-head/head-logo-1.jpg" width="128" height="200" /></td>
    <td width="815" valign="top"><p> </p>
      <p> </p>
      <p> I will be adding the Spry Content Slideshow in this area</p>
    </td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="2" bgcolor="#F2F2F2"><ul id="MenuPublic1">
      <li> <a href="#">Classifieds</a>
      <ul>
        <li><a href="#">Classifieds & Job Listings</a></li>
      </ul></li>
      <li> <a href="#">NJ Municipalities Magazine</a>
        <ul>
          <li> <a href="#">Current Issue</a></li>
          <li> <a href="#">Advertise</a> </li>
          <li> <a href="#">Subscribe</a> </li>
          <li> <a href="#">Submission Guidelines</a></li>
        </ul>
      </li>
      <li> <a href="#">Seminars & Events</a>
      <ul>
        <li><a href="#">Events & Registration</a></li>
        <li><a href="#">CEU Requirements</a></li>
      </ul>
      </li>
      <li> <a href="#">Legislation</a>
        <ul>
          <li><a href="#">Legislative Committee</a></li>
          <li><a href="#">Legislative Priorities</a></li>
          <li><a href="#">Legislative Bulletin</a></li>
          <li><a href="#">Conference Resolutions</a></li>
      </ul></li>
       <li> <a href="#">Issues & Documents</a>
        <ul>
          <li><a href="#">Issue Alerts</a></li>
          <li><a href="#">Press & Media</a></li>
          <li><a href="#">Publications</a></li>
          <li><a href="#">Sample Resolutions</a></li>
          <li><a href="#">League Testimony</a></li>
      </ul></li>
       <li> <a href="#">NJLM Directories</a>
        <ul>
          <li><a href="#">Staff</a></li>
          <li><a href="#">Executive Board</a></li>
          <li><a href="#">League Officers</a></li>
          <li><a href="#">League Attorneys</a></li>
          <li><a href="#">League Affiliates</a></li>
          <li><a href="#">League Committees</a></li>
      </ul></li>
        <p>
          <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1
var MenuPublic1 = new Spry.Widget.MenuBar2("#MenuPublic1", {
      widgetID: "MenuPublic1",
   widgetClass: "MenuBar MenuPublic1LeftShrink",
   insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
        </script>
    </p></td>
</tr>
<tr>
    <td width="175" valign="top" bgcolor="#F2F2F2"><p> </p>
      <ul id="MenuPublic1_2">
        <li> <a href="#">Home</a></li>
        <li> <a href="#">Entertainment</a>
          <ul>
            <li> <a href="#">TV Listings</a></li>
            <li> <a href="#">Music</a>
              <ul>
                <li> <a href="#">Hits</a></li>
                <li> <a href="#">Ragga</a>
                  <ul>
                    <li> <a href="#">Roots</a></li>
                    <li> <a href="#">Reggaeton</a></li>
                    <li> <a href="#">Dancehall</a></li>
                  </ul>
                </li>
                <li> <a href="#">Country</a></li>
              </ul>
            </li>
            <li> <a href="#">The Dirt</a>
              <ul>
                <li> <a href="#">Hollywood</a></li>
                <li> <a href="#">NY Beat</a></li>
                <li> <a href="#">London Scene</a></li>
              </ul>
            </li>
            <li> <a href="#">The Web</a></li>
          </ul>
        </li>
        <li> <a href="#">Politics</a></li>
        <li> <a href="#">Sports</a>
          <ul>
            <li> <a href="#">Football</a></li>
            <li> <a href="#">Baseball</a></li>
            <li> <a href="#">Basketball</a></li>
            <li> <a href="#">Racing</a>
              <ul>
                <li> <a href="#">F1</a></li>
                <li> <a href="#">Indy Car</a></li>
                <li> <a href="#">Stock Car</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1_2
var MenuPublic1_2 = new Spry.Widget.MenuBar2("#MenuPublic1_2", {
      widgetID: "MenuPublic1_2",
   widgetClass: "MenuBar MenuBarVertical MenuPublic1_2MenuBarVerticalLeftShrink",
   insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
      </script>
<p> </p></td>
    <td width="773" valign="top" bgcolor="#F2F2F2">
      <p>EditRegion3</p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p>This is the bottom of the page</p>
    </td>
</tr>
</table>
</body>
</html>

I get the following error message
Perhaps you could have a look at KB927917
Gramps

[CS3 - Win] Smart Guides not showing up when Snap To Grid enabled

Has anyone else encountered this bug?
AI CS3 13.02
Smart Guides are turned on, but hovering over items does not show the cyan hints, snapping to anchor points / paths etc does not work. This only occurs when Snap To Grid is enabled. If you then go and turn it off, the Smart Guides start working again as expected.
Is this a known bug?
Tom

Thanks for the reply Mike. Smart Guides work perfectly for me provided Snap to Grid is turned off.
I can see there being a conflict between snapping to grid and smart guides in CS3 - which takes precedence? From a UX perspective, if these two snapping modes are mutually exclusive, there should be at the very least an alert letting you know the other mode is disabled; the menu item should be greyed out. Or if it's truly an either-or situation, then the menu needs to be revised such that both snap to grid and smart guides are within the same submenu, and only one can be selected at a time, toggle with CMD+SHIFT+OPT+U.
T

Help with Dreamweaver CS5 spry menus. Menu is not dropping down in IE7.

Hello.
We recently upgraded from GoLive CS3 to Dreamweaver CS5. Wow! This has been a big change for us. We are having trouble with a website that we are building, specifically the Spry Menu drop downs not appearing correctly in IE7 and older. While the dropdown menu appears in other browsers, it is not dropping down at all in IE7 and earlier versions. After researching this topic on many websites, including this forum, we are still unable to resolve our particular issue. We have tried many of the suggestions that are common to our problem, but have not found a solution as yet. Could someone please check out this page for us, and possibly give us some advise. We are working on Mac OSX. Thank you in advance for any suggestions you may offer.
http://www.advertools.net/pgtdemo/index.html

When I added the following to the document
<style>
#main_image {position:static;}
</style>
the menu items appeared albeit in the wrong position.
The reason for the hidden menu items is because #main_image had a position of relative, effectively creating a flow of its own rather than following the natural flow of the document.
Now for the postion of the submenu. If I add the following style rules to the document the submenu items are in the correct position
ul.MenuBarHorizontal li {text-align: left;}
ul.MenuBarHorizontal a {text-align: center;}
In the first line I have reset the rule that you had changed to center align and in the second line (which is not in the original CSS) I have aligned the text in the anchor tag to align center.
The reason is that IE<8 behaves differently to other browsers when it comes to list items causing the nested list items (submenu) to align themselves to the center of the text of the parent list item.
I hope the above helps.
Gramps

Submenu's not showing up in IE7

Similar Messages

Maybe you are looking for