Spry Menu Invisible in IE

Hey there folks. For help in the past I'm grateful. My website (and that I've done for a friend) looks great.
I am trying to put a "Country List" vertical spry menu on my site (within a table). I am using DW CS5. In Firefox it appears just fine ( see www.aloe-vera.org/index.htm ) but in IE 8 (and I suppose earlier versions) it does not appear at all unless you mousover. But, anybody who mouses over would do so as a happy accident only. Without the menu appearing (it is totally invisible), there is no way to know that they can select their country.
I would like to get rid of the menu at the top of the pages (it just doesn't look good) and leave the 'header' section as only a title for the page.
But, before I can get ride of that, I really need the country menu to the left (of the "Facebook 'Recommend') to appear in all browsers as soon as the page loads, not only when somebody happens to mouse over it.
For assistance, I'd be grateful. And, today is my 54th birthday - so you could consider your help an added birthday gift!
Thanks alot everybody,
David Honaker (Phoenix, Arizona, USA)

Just a few little adjustments to be made
1. Remove the excess rules in the following
ul.MenuBarVertical
    border: 0px none #FFF;
/*    white-space: nowrap;
    width: auto;
    font-family: Arial, Helvetica, sans-serif, Verdana;
    color: #D6D6D6;
    background-color: #060;
    cursor: auto;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;*/
2. Change the colour here
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #FFF;
    padding: 0.5em 0.75em;
   color: #FFF;
    text-decoration: none;
3. Remove the colour here
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /*color: #FFF;*/
There may be a few other nigly little things. Just comare your modified CSS with the original.
Gramps

Similar Messages

Trouble with Spry Menu Bar Not Opening on Hover

I have two Spry Menu Bars on this one page. They were both working fine. Now the menu bar on the top right is not opening on rollover. I have uploaded the Spry .JS and .CSSfiles to the server.Could it be that I added 2 to the names of the CSS styles, but not all of them? I just tested them all with 2 after the style name, and it didn't fix it.
I also noticed that the ability to edit these two navigation bars using the Property Inspector went away. I can't seem to click on them to edit. Now I edit them through the code only.
Rebuild it on another page, and paste in the code?
Suggestions?
ALso, getting an error message on line 2 of HTML below, which I don't remember editing.
I will paste the template page HTML, then the CSS, then the Javascript Spry file for Menu Bar Horizontal. I did not edit the JS file at all.
Link to the uploaded files: http://www.sproulcreative.com/filetest/panin_website/
Thanks for any help you can offer.
D
HTML for template page:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Press Reviews of Paninos Italian Restaurant Food in three Colorado Locations</title>

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

</head>
<body>
<div id="wrapper">
<a href="#skiptomaincontent">
     <img src="../images/spacer.gif" alt="Skip to main page content" name="spacer" width="1"
height="1" class="invisible" id="spacer">   </a>

<div id="topnav">

<script type="text/javascript">

</script>
<ul id="twittermenu" class="MenuBarHorizontal2">
      <li><a href="../paninos_local_italian_restaurant_fort_collins_colorado_springs_minnesota.html">H ome</a></li>
      <li><a href="../reviews_italian_restaurant_food.html">Reviews</a></li>
      <li><a href="../history_of_paninos_local_italian_restaurant_coloradosprings_fortcollins_minnesot a.html">History</a></li>
      <li><a class="MenuBarItemSubmenu2" href="#">Twitter</a>
                  <ul>
                        <li><a href="http://twitter.com/Paninosfc">Follow Fort Collins, CO, Paninos</a></li>
                        <li><a href="http://twitter.com/paninosmn">Follow Minnesota Paninos</a></li>
                  </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu2">Facebook</a>
            <ul>
                  <li><a href="http://www.facebook.com/search/?q=Paninos&init=quick#/pages/North-Oaks-MN/Paninos/13234142 7180?v=wall&ref=search">Minnesota Twin Cities Four</a></li>
            </ul>
            </li>
</ul>

</div>

<div id="pagebg">
<div id="centralpageborder">

<div id="headerbox">
      <div align="left">
            <img src="../images/web_logo_paninos_final.png" alt="Paninos Italian Restaurant Logo (black text with a tomato for the letter O), Your family's Italian restaurant for over 35 years, locally owned and operated." width="215" height="118" class="paddingbottom" />

<ul id="MainFourNav" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_mainnav_locations_contact.png" alt="Paninos Italian Restaurant Locations and Contact Information: Colorado Springs, Fort Collins, Minnesota" name="locationscontactbutton" width="167" height="24" border="0" id="locationscontactbutton" /></a>                 <ul>
                     <li><a href="../contact_info_italian_restaurant_fort_collins_colorado_paninos.html">Fort Collins, Colorado, by CSU</a></li>
                     <li><a href="../contact_info_italian_restaurant_colorado_springs_downtown_colorado_paninos.html" >Colorado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_8th_street_colorado_paninos.htm l">Colorado Springs: South Eighth St.</a></li>
                  <li><a href="http://paninos.com/minnesota/">Minnesota website</a></li>
                  </ul></li>
      <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_main4nav_download_menus.png" alt="Download Italian Restaurant Menus in PDF format for restaurants in Fort Collins, Colorado; Colorado Springs, Colorado; and Minnesota" name="menudownloadbutton" width="142" height="24" border="0" id="menudownloadbutton" /></a>
            <ul>
                  <li><a href="#"><em>Please pick your favorite Paninos:</em></a></li>
                  <li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Downtown.pdf">Color ado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Eighth_Street.pdf"> Colorado Springs: South Eighth St.</a></li>
                  <li><a href="../online_menus_local_italian_food/Paninos_Menu_Fort_Collins_Colorado.pdf">Fort Collins, Colorado, by CSU</a></li>
                  <li><a href="http://paninos.com/minnesota/">Minnesota (go to website)</a></li>
            </ul>
      </li>
      <li><a href="../photo_gallery_pasta_dishes_pizza_italian_food.html"><img src="../images/img_main4nav_photo_gallery.png" alt="Photo Gallery of Local Italian Food including pizza and pasta" name="photogallery" width="56" height="24" border="0" id="photogallery" /></a> </li>
      <li><a href="../pizza_coupons_and_special_deals_italian_food.html"><img src="../images/img_main4nav_specials.png" alt="Pizza Coupons and Specials" name="pizzacouponsandspecials" width="71" height="24" border="0" id="pizzacouponsandspecials" /></a> </li>
</ul>
<script type="text/javascript">

</script>
            
            <p class="headerphotos"><img src="../images/imgheader_lasagna_beef_hot_cheesey_coloradosprings_fortcollins_italian_res taurant.png" width="263" height="133" /><img src="../images/imgheader_spinach_salad_with_chicken.png" width="263" height="133" /><img src="../images/imgheader_big-t-pizza2.png" width="263" height="133" /></p>
            </div>
</div>
<div id="bodybox">
<div id="pagetitle"><img src="../images/img_title_press_reviews_italian_restaurant.png" width="307" height="38" /></div>
<div id="innerbdybox">
<div id="content">
<div id="maintext">

<a name="skiptomaincontent" id="skiptomaincontent"></a>
<h1>A Tradition Food And Sports: <br />
                        CC & Panino’s Love of Hockey Runs From Colorado to Minnesota</h1>
      <h4>Byline: By Jim Bainbridge, The Gazette</h4>
      <p>No Colorado Springs business has had a deeper bond with the Colorado College hockey program during the past three decades than Panino’s Restaurant, a connection seen on its walls, in its clientele and in its bloodlines.<br />
            Panino’s has been tied to the school’s hockey program since the restaurant was bought in 1974 by former CC All-America hockey player Tony Frasca. It’s still the place to be on game day a generation later with his son Mike running things. <a href="http://daily.gazette.com/Repository/ml.asp?Ref=VGhlR2F6ZXR0ZS8yMDA1LzAzLzI5I0FyMDMzMDI=&Mo de=HTML&Locale=english-skin-custom"><span class="smalltext">Click here to view entire article.</span></a><br />
<span class="smalltext">(Reprinted with permission of The Gazette)</span></p>
       </div>

      <div id="photosidebar">
            
            <img src="../images/img_waiter1_pizza_lasagna.png" alt="Happy waiter serving Pizza and Lasagna" width="190" height="158" /> <br />
            <img src="../images/img_panino_italian_grinder_sandwich.png" alt="Grinder Hot Italian Sandwich called a Panino" width="190" height="158" /></div>
      
</div>
      
<div id="linkssidebar">
        <p>The Gazette<br />
            The Coloradoan<br />
            The North Forty News<br />
            Colorado Springs Times</p>
</div>

</div>
<div id="footer"> </div>
<br />
<br />
</div> 
</div>
</div>
</div>
</body>
</html>
CSS for Spry Menu Bar:
@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.MenuBarHorizontal2
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    /*margin-top: -10px; */
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
    padding-top: 0;
    padding-bottom: 0;
/* 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.MenuBarHorizontal2 li
    list-style-type: none;
    font-size: 95%;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
/* 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.MenuBarHorizontal2 ul
    margin: 0;
    padding: 0;
    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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal2 ul li
    width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal2 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal2 ul
    border: 1px solid #9E2532;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal2 a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #F3E8CC;
    text-decoration: none;
    background-color: #663300;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal2 a:hover, ul.MenuBarHorizontal2 a:focus
    color: #FFF;
    background-color: #663300;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal2 a.MenuBarItemHover, ul.MenuBarHorizontal2 a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal2 a.MenuBarSubmenuVisible
    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.MenuBarHorizontal2 a.MenuBarItemSubmenu2
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenu2
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 100% 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.MenuBarHorizontal2 a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 100% 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.MenuBarHorizontal2 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.MenuBarHorizontal2 li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
JAVASCRIPT FILE FOR MENU BAR HORIZONTAL:
/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
// 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.
var Spry;
if(!Spry)
    Spry = {};
if(!Spry.Widget)
    Spry.Widget = {};
// 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;
    var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
        // bail on older unsupported browsers
        return;
    // load hover images now
    if(opts)
        for(var k in opts)
            var rollover = new Image;
            rollover.src = opts[k];
    if(this.element)
        this.currMenu = this.element;
        var items = this.element.getElementsByTagName('li');
        for(var i=0; i<items.length; i++)
            this.initialize(items[i], element, isie);
            if(isie)
                this.addClassName(items[i], "MenuBarItemIE");
                items[i].style.position = "static";
        if(isie)
            if(this.hasClassName(this.element, "MenuBarVertical"))
                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.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:false;';
    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.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, "MenuBarActive");
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    return (navigator.vendor == 'Apple Computer, Inc.' && (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, "MenuBarSubmenuVisible");
        if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
            if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
                menu.style.top = menu.parentNode.offsetTop + 'px';
        if(typeof document.uniqueID != "undefined")
            this.createIframeLayer(menu);
    this.addClassName(this.element, "MenuBarActive");
// 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, "MenuBarSubmenuVisible");
        if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
            menu.style.top = '';
            menu.style.left = '';
        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, isie)
    var opentime, closetime;
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = false;
    if(menu)
        this.addClassName(link, "MenuBarItemSubmenu");
        hasSubMenu = true;
    if(!isie)
        // 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)
        if(self.bubbledTextEvent())
            // ignore bubbled text events
            return;
        clearTimeout(closetime);
        if(self.currMenu == listitem)
            self.currMenu = null;
        // show menu highlighting
        self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
        if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
            opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
    }, false);
    this.addEventListener(listitem, 'mouseout', function(e)
        if(self.bubbledTextEvent())
            // ignore bubbled text events
            return;
        var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
        if(!listitem.contains(related))
            clearTimeout(opentime);
            self.currMenu = listitem;
            // remove menu highlighting
            self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
            if(menu)
                closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
    }, false);

It has to do with all of your absolutely positioned elements. What's happening is that the menu is falling behind the absolutely positioned elements on your page. Since there is nothing there, it's like trying to click a link that is outside your home while you are staring through a window. Personally with that page setup you have now I really don't see a need for absolutely positioned elements. But if you feel you will require them as part of your design you need to ensure the z-index of your menu layer is greater than that of the body elements positioned below it.

Replicating a gorgeous Spry menu in other pages not working

Hi,
I've created a gorgeous spry menu in one of my pages:
http://agapemedia-international.com/test.html
Works perfectly.
Would like to copy this same menu over to the other pages of the site, so:
1. Copied the css <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> into new html file
2. Copied the <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> to the new html file
3. Surrounded all the spry menu - essentially nested <ul>'s - with a div for easy copying
4. Copied the div to the proper location in the new html file.
Here is that new file:
http://agapemedia-international.com/about2.html
Everything looks fine, but when I hover over, no drop downs happen. Oh, and the lovely Spry Menu Bar widget nor the blue tab that calls it up doesn't show up in Dreamweaver editor either. Is there invisible data that doesn't appear in the html code that wasn't copied?
Any brilliant ideas?
Thanks a million!
Peace,
Ben
PS: I'm using Dreamweaver CS3 on a Powerbook G4

I am having a similar problem, but pretty sure it is a newbie issue. I made a menu bar and then wanted to copy it to a second htm page.
I first put the cursor in the div region of the code where I wanted it to go and added a stock spry menu. Then I deleted the div-ul-/div code and pasted the custom menu code in its place. it appears, but does not drop down and lost some of the color attributes. When I place the cursor over it in split mode, I do NOT see the Spry menu bar: assts in the upper left corner of the menu like I see on the index.html page. I'd like to copy the menu from the index.html to multiple subsequent pages. What am I doing wrong? Everything looks identical to me...
<link rel="stylesheet" href="coolstyle.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="javascripts.js"></script>
<script language="JavaScript" type="text/javascript" src="pop-closeup.js"></script>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000" text="#FFFFFF" class="pagebackground">

<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" valign="top">
<div id="banner"><img src="gallery/banner.gif" width="100%" height="50" alt="DogfishBay Studios" />
<ul id="asts" class="MenuBarHorizontal">
<li><a href="index.html" title="home page">Home</a>    </li>
<li><a href="bio-studio.htm" title="About DogFishBay Studios" class="MenuBarHorizontal">Studio</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Musicians</a>
    <ul>
      <li><a href="bio-jules.htm" title="Juliane Poirier biographical information">Juliane Poirier</a>        </li>
      <li><a href="bio-ray.htm" title="Biographical information for Ray Burns">Ray Burns</a></li>
      <li><a href="bio-jeff.htm" title="Biographical Information for Jeff Powel">Jeff Powel</a></li>
      <li><a href="bio-chris.htm" title="Biographical information on Chris Rin">Chris Rin</a></li>
      <li><a href="#">Rod Lewis</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Music</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Music by Style</a>
        <ul>
          <li><a href="samples1.htm" title="Rock and Roll!">Rock</a></li>
          <li><a href="samples2.htm" title="Folk">Folk</a></li>
          <li><a href="samples3.htm" title="Country">Country</a></li>
          <li><a href="samples4.htm" title="Latin">Latin</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Music by Artist</a>
        <ul>
          <li><a href="samples_jules.htm">Juliane Poirier</a></li>
          <li><a href="samples_ray.htm">Ray Burns</a></li>
          <li><a href="#">Steve Thomas</a></li>
          <li><a href="samples_chris.htm">Chris Rin</a></li>
          <li><a href="samples_rod.htm">Rod Lewis</a></li>
          <li><a href="#">Jeff Powel</a></li>
        </ul>
      </li>
      <li><a href="podcast.htm" title="Podcasts">Podcasts</a></li>
    </ul>
</li>
<li><a href="gallery-1.htm" class="MenuBarItemSubmenu">Xtras</a>
    <ul>
      <li><a href="gallery-1.htm" title="Band Photos">Photos</a></li>
      <li><a href="video.htm" title="Band Videos">Videos</a></li>
      <li><a href="scene.htm" title="Music Scene">Music Scene</a></li>
      <li><a href="reviews.htm">Reviews</a></li>
    </ul>
</li>
<li><a href="links.htm" title="Links" class="MenuBarItemSubmenu">Information</a>
    <ul>
      <li><a href="links.htm" title="Links">Links</a></li>
      <li><a href="site_map.htm" title="Site Map">Site Map</a></li>
      <li><a href="contact.htm" title="Contact information">Contact</a></li>
    </ul>
</li>
</ul>
</div>

<table style="clear: both;"table cellpadding="0" cellspacing="0" border="0" width="100%" class="home-stripe"><tr><td align="left">
<img src="picts/spacer.gif" width="10" height="2" alt="image"><br>
</td></tr></table>
<script language="JavaScript" type="text/javascript" src="header.js"></script>

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="ban-area"><tr><td>
<img src="picts/bio.jpg" border="0" width="750" height="50" alt="image"><br>
</td></tr></table>


<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="whitespaceL printhide">
<img src="picts/spacer.gif" width="1" height="10" class="whitespaceL" alt="image"><br>
</td><td align="center" valign="top">
<br><br>

<table cellpadding="0" cellspacing="15" border="0" width="400" class="textwidth"><tr><td align="left" valign="top">

<span class="title">
History: Dogfish Bay Studios<br>
<center>
<img src="picts/biostudio.jpg" alt="add keywords here"><br>
</center>
</span>
Dogfishbay Studios were started in December of 2008 following a gift of ProTools M-Powered 8 to me from my son, Greg.
Presentient being that he is, he warned his mother that this gift would probably be a very small part of the cost needed to set up the studio.
The studio was set up to provide me and my friends a way to record the songs we’d written, sometimes decades earlier, and to share them with
family and friends. After three years of recording we finally came to a point where we wanted to share the work with a broader audience
and that desire precipitated the need to create a studio name, a website, and a whole new set of skills.
<br><br>
This work reflects the generous collaboration of friends and family. The sale of the music is to support the musicians, the songwriters and
the continued survival of the studio. None of the contributors has been able to forgo the “day job” and all play for the love of it.
We feel blessed by all those who have taken the time to listen to our music and hope, whether you purchase it or not, that it brings to
the listener the kind of pleasure that it has brought to us in the making of it.
<br>
<span class="title">
<br>
</span>
<br><br>
<img src="picts/spacer.gif" width="10" height="10" class="textwidth" alt="image">
<br><br>
</td></tr></table>

</td><td class="whitespaceR printhide">
<img src="picts/spacer.gif" width="1" height="10" class="whitespaceR" alt="image"><br>
</td><td align="center" valign="top" class="sidebar">

<script language="JavaScript" type="text/javascript" src="sidebar.js"></script>
<script language="JavaScript" type="text/javascript" src="sidebar-2.js"></script>
<img src="picts/spacer.gif" width="150" height="10" alt="image"><br>
</td></tr></table>


</td></tr><tr><td valign="bottom">

<table cellpadding="0" cellspacing="10" border="0" width="100%" class="footer">
<tr><td align="left" valign="middle">
<script language="JavaScript" type="text/javascript" src="copyright.js"></script>
</td><td align="right" valign="middle">
<script language="JavaScript" type="text/javascript" src="copyright-allwebco.js"></script>
</td></tr></table>

</td></tr></table>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Spry menu bar woes (add submenu levels and edit width)

So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one. So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise: when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>
the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code? i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull. Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
HTML code for the menu:
<tr>     <td><ul id="MenuBar1" class="MenuBarHorizontal">       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>         <ul>           <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>               <li><a href="#">music Sources</a></li>               <li><a href="#">amplifiers</a></li>               <li><a href="#">paging</a></li>               <li><a href="#">speakers</a></li>               <li><a href="#">microphones</a></li>             </ul>           </li>           <li><a href="#">racks and stands</a></li>           <li><a href="#">cables</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a>         <ul>           <li><a href="#">Who are we?</a></li>           <li><a href="#">history</a></li>   <li><a href="#">contact us</a></li>   <li><a href="#">philosophy</a></li>   <li><a href="#">careers</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a>         <ul>           <li><a href="#">catalogs</a>            </li>           <li><a href="#">manuals</a></li>           <li><a href="#">software</a></li>           <li><a href="#">documents</a></li>           <li><a href="#">pricelists</a></li> </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li>     </ul></td>
sprymenuhorizontal.css:
@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: 14px;      cursor: default;      width: 1010px;      font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ 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;      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 {      list-style-type: none;      font-size: 100%;      z-index: 1020;      cursor: default;      width: 166px;      position: absolute;      left: -1000em;      background-color: #6C6C6C;      height: 0px;      margin-top: 0px;      margin-right: 0em;      margin-bottom: 10px;      margin-left: 0em;      text-align: right;      text-indent: 0em;      padding-top: 0px;      padding-right: 0em;      padding-bottom: 0px;      padding-left: 0px;      border-top-width: 1px;      border-right-width: 1px;      border-bottom-width: 1px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #666;      border-right-color: #666;      border-bottom-color: #666;      border-left-color: #666; } /* 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;      height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      height: 41px;      margin-top: 0%;      margin-right: 0%;      margin-bottom: 0px;      margin-left: 162px;      float: right; } /* 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 #666;      background-color: #6C6C6C;      height: 0px;      padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #6C6C6C;      padding: 0em;      color: #FC0;      text-decoration: none;      font-size: 14px;      margin-left: 0em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      background-color: #FC0;      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: #FC0;      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: 98% 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: 98% 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: 98% 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: 98% 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;      } }[/SPOILER] any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...

since the layout of the pasted text got all weird, here i'm trying it again.
sprymenubarhorizontal.css:
@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: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
/* 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;
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
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
/* 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;
height: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 166px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
/* 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 #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #FC0;
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: #FC0;
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: 98% 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: 98% 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: 98% 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: 98% 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;

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #003366;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/international.jpg);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
    background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
</style>

Spry menu bar doesn't appear correctly in IE

Hi guys..
I created a spry menu bar in DW CS4. It looks fine in Firefox but in IE 8, the background image of the navigation bar appears white after allowing activecontrol to run. I didn't include any image for ul.MenuBarHorizontal a because I wanted to use the background image for the div containing the navigation bar.(Hope I didn't confuse you there).. I tried using the search box but couldn't find any solution to my problem. Here are my screen shots.
This is in firefox.
This is in IE 8 before allowing activex.
This is in IE 8 after allowing activex. (Part of the navigation bar is white)
Here's the code.Hope you can help me asap. Thanks!
@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: center;
    cursor: pointer;
    width: 9em;
    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: 9em;
    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: 9em;
/* 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;
    background-image: url(../images/single.jpg);
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    padding-top: 1.05em;
    padding-right: 0.75em;
    padding-bottom: 1.05em;
    padding-left: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image: url(../images/single.jpg);
/* 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: #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-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-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(../images/single.jpg);
    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-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;

/* 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;
I hope this helps.
Ben

Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?

Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="../CSS/main.css" rel="stylesheet" type="text/css" />


<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</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:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
    <div id="buyNow1">
      <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
    </div>
</div>
<div id="mainNav">
    <ul id="mainNavcontent" class="MenuBarHorizontal">
      <li><a href="../index.htm">Home</a>        </li>
      <li><a href="../swimmer.html">Swimmer Buddy</a></li>
      <li><a href="../order_now.html">Order Now</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="../photo_gallery.html">Photos</a></li>
          <li><a href="../video_gallery.html">Videos</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
        <ul>
          <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
          <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
          <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
          <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
        </ul>
      </li>
      <li><a href="../about.html">About Us</a></li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>

<div id="pageInfo">
    <div id="info_page">
      <p class="regionID">Region ID</p>
      <hr class="breaklinePageInfo" />
      <p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
    </div>
    <div id="mainContent">
      <div id="content">
        <p>Main Content Goes her</p>
      </div>
    </div>
</div>


   <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
   
<div id="footer">
<div id="footertext">
        <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
      </div>
    <div id="footerlinks">
        <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
      </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@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: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
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: 132.8px;
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: #333;
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.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* 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: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
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(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* 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(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* 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(SpryMenuBarDownHover.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;

Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

Question: My spry menu bar is not displaying correctly in Dreamweaver

Hello,
I am new to Dreamweaver CS5, so coding isn't my area of expertise. My problem with my spry menu bar is that it does not display the tabs on the menu bar correctly. When I try to apply new changes to the CSS of the horizontal menu bar, half of the tabs will change and the other half will not. Also, I am unable to drag and move the menu bar itself around, a function that I was once able to do before. At times, only one tab of the menu bar will display itself, without any of the other tabs as well.
I have a hunch that my problems stem from some coding errors in the SpryMenuBarHorizontal.css, and possibly in the SpryMenuBar.js. On the CSS Styles panel, my SpryMenuBarHorizontal.CSS list reads as follows:
I also have a hunch that something about this line-up is also incorrect, but I don't exactly know what the problem is.
Here is what my coding for my SpryMenuBarHorizontal.css looks like right now:
@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;
    text-align: center;
/* 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: 8em;
    float: left;
    left: 10;
    top: 10;
    height: 10;
/* 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;
    text-align: left;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #000;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
    font-family: Futura;
    float: 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: #C00;
    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: #C00;
    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%;
    text-align: center;
/* 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: block;
    f\loat: left;
    background: #FFF;
And here is what my SpryMenuBar.js coding looks like right now too:
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
If anyone could possibly steer me on the right direction with this, I'd be very grateful! I've been struggling with this for about a month now and I feel like I may have only made the situation worse.
I'm not sure if I have to keep making a new spry assets folder in my website or not or if I have to drag and drop the spry assets into the root folder. I have restarted my website over at least a dozen times by now. I have tried changing folders, dragging and dropping various spry assets folders everywhere and I have also uninstalled and reinstalled my copy of Dreamweaver CS5 in the hopes of getting my spry horizontal menu bar to act normal. I am completely new at Dreamweaver and I really, really need some help with this.
Thanks!

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.

Spry Menu Bar Colors and Pictures in Dreamweaver

I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.

> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development

I lost the blue tab on my spry menu.

I've saved my document and re-opened it, but still can't get the blue spry menu tab to show. Also can't see my submenus in the browser. It shows in my code. Here is my code.
<table width="878" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="878" height="37" align="center" valign="middle" bgcolor="#D1D1D1">
       <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">HOME</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
        <ul>
          <li><a href="#">Become A Member</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">Contact Us</a></li>
</ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">NEWS</a>
        <ul>
          <li><a href="#">Events</a>          </li>
          <li><a href="#">Job Listings</a></li>
          <li><a href="#">Hot Deals</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">EVENTS</a>
        <ul>
          <li><a href="#">News</a></li>
          <li><a href="#">Chamber Calendar</a></li>
          <li><a href="#">Community Calendar</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">Hot Deals</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">COMMUNITY</a>
        <ul>
          <li><a href="#">Scott Air Force Base</a></li>
          <li><a href="#">City of O'Fallon</a></li>
          <li><a href="#">O'Fallon Welcome Guide</a></li>
          <li><a href="#">O'Fallon-Shiloh Area Restaurant Guide</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Shiloh</a>
            <ul>
              <li><a href="#">Village of Shiloh</a></li>
              <li><a href="#">Village Services Guide</a></li>
              <li><a href="#">Shiloh Community Calendar</a></li>
            </ul>
          </li>
          <li><a href="#">Events & Reception Planning Guide</a></li>
          <li><a href="#">Relocation Packet Info</a></li>
          <li><a href="#">The Tourism Burea Illinois South</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">CONTACT US</a>
        <ul>
          <li><a href="#">Member Login</a></li>
          <li><a href="#">Member Directory</a></li>
          <li><a href="#">Community Business Info</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">JOIN US</a>
        <ul>
          <li><a href="#">Member Directory</a></li>
          <li><a href="#">Become A Member</a></li>
          <li><a href="#">Member Login</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">COMMITTEES</a>
        <ul>
          <li><a href="#">Board of Directors</a></li>
          <li><a href="#">Ambassadors</a></li>
          <li><a href="#">Star Investors</a></li>
          <li><a href="#">Member Directory</a></li>
        </ul>
      </li>
      <li><a href="#">PHOTO GALLERY</a></li>
</ul></td>
</tr>
</table>
@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
    list-style-type: none;
    cursor: default;
    width: 878px;
    white-space: nowrap;
    display: inline;
    position: relative;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: 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 auto;
    padding: 0;
    position: relative;
    text-align: left;
    cursor: default;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-weight: normal;
    font-style: normal;
    font-size: 87%;
    white-space: nowrap;
    line-height: normal;
    width: auto;
    clear: none;
    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
    text-align: left;
    white-space: nowrap;
    display: block;
    float: none;
    font-size: 100%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-style: normal;
    line-height: normal;
    font-weight: bolder;
    text-transform: none;
    background-color: transparent;
    width: auto;
    position: relative;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    margin-top: -5%;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 95%;
    position: absolute;
/* 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-top-color: #021844;
    border-right-color: #021844;
    border-bottom-color: #021844;
    border-left-color: #021844;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #021844;
    color: #FFF;
    text-decoration: none;
    border: 1px solid #FFF;
    text-align: left;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    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
    color: #036009;
    background-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
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: none;
    background-position: 95% 50%;
    background-color: #021844;
/* 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(SpryMenuBarRightHover.gif);
    background-position: 95% 50%;
    background-repeat: no-repeat;
/* 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: none;
    background-position: 95% 50%;
    color: #036009;
    background-color: #FFF;
/* 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;
// 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

You don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O.

Problem with .css for Spry menu

Hi,
I am having a problem with the Spry menu I have created and edited. All looks great in the Design view of Photoshop however under the Live view or opened using a browser the menu reverts to a list of hyperlinks!
I have checked the .css link but when using Firefox CSS editor the CSS file for the menu is simply blank?
Any suggestions would be great!
Thanks,
Ozan

Your SpryMenuBarHorizontal.css needs to be within your SpryAssets folder, which is where it would have been put automatically when you inserted the SpryMenuBar. You can move it back in there using the Files Panel.
Here is what the file structure needs to look like:
SpryAssets
SpryMenuBar.js
SpryMenuBarHorizontal.css
cssstyletemplate.css
index.html (or whatever the name of your page is)
Hierarchally, the top level of your root folder will show folders for SpryAssets and css and the html pages will be on the same level.
The Spry assets themselves will be down a level IN the SpryAssets folder, as the styletemplate.css file will be down a level IN the css folder.
In the head of the document, you will have
     <link rel="stylesheet" type="text/css" href="css/styletemplate.css" />
     <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"> </script>
     <link rel="stylesheet" type="text/css" href="SpryAssets/SpryMenuBarHorizontal.css" />
At the end, remove the slash before Spry inside the imgDown and imgRight sections:
     <script type="text/javascript">

</script>
Compare these with your files and file structure and correct any small typos, and they should be correctly linked.
Beth

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

I was working on my spry menu bar and now my sidebar1 photo moves with the menu bar?

I was working on my spry menu bar, and getting really far with it thanks to GRAMPS, and all of a sudden I wanted to put padding of 30px top and 30 px bottom on the sidebar1 photo in the container and now all of a sudden the home.jpg photo in the sidebar moves when you hover over the menu bar.
I can noit for the life of me figure out what changed and somehow was so excited about my spry menu bar working that I did not save the most recent working page. Can anybody look at this with me and let me know what changed to mess the page up on me.
Thanks a million.
Ted
site is located here http://www.subzerorefrigeration.com
None of the links are working I have just been playing with the spy menu for weeks. I finally figured it out and do not belive the error is in the spry style sheets.
Here is the code for my page. I know I am working with a template. I really do not want to start over if a <div> tag is missing.
Any other suggestions would be appreciated.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sub Zero Refrigeration Heating and Air Conditioning in Midlothian Illinois</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="190" align="left" id="FlashID" title="Sub Zero Refrigeration "Subby" Logo">
      <param name="movie" value="Images/SubbyMovie.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="7.0.70.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object data="Images/SubbyMovie.swf" type="application/x-shockwave-flash" width="125" height="190" align="left">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="7.0.70.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>
    <img src="Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Condtioning Header Photo" width="834" height="190" align="left" /><br />
</div>
<div class="container" id="navbar"> </div>
<div class="namephoto">
<ul id="MenuBar" class="MenuBarHorizontal">
   <li><a class="MenuBarItem" href="#">Home</a></li>
   <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
     <ul>
       <li><a href="#" class="MenuBarItemSubmenu">Our Staff</a>
         <ul>
           <li><a href="#">Bud Wagner</a></li>
           <li><a href="#">Tim Wagner</a></li>
           <li><a href="#">Dave Allen</a></li>
           <li><a href="#">Terry Burke</a></li>
           <li><a href="#">Larry Skarr</a></li>
           <li><a href="#">Niko Opla</a></li>
           <li><a href="#">Gina Ames</a></li>
           <li><a href="#">Laura Kane</a></li>
         </ul>
       </li>
       <li><a href="#">Our Service Area</a></li>
       <li><a href="#">Our Mission Statement</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
         <ul>
           <li><a href="#">Our Review's</a></li>
           <li><a href="#">Our Competition's Reviews</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Careers</a>
         <ul>
<li><a href="#">HVAC Technician</a></li>
<li><a href="#">HVAC/R Installer</a></li>
<li><a href="#">Commercial Refrigeration Technician</a></li>
         </ul>
       </li>
       <li><a href="#">Testimonials</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
         <ul>
           <li><a href="#">On "YAHOO"</a></li>
           <li><a href="#">On "YELP"</a></li>
           <li><a href="#">On "MERCHANT CIRCLE"</a></li>
           <li><a href="#">On "GOOGLE PLACES"</a></li>
         </ul>
       </li>
</ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Repair</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning </a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Schedule A Service Call</a></li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Sales</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace </a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Financing</a></li>
       <li><a href="#">Schedule a "FREE" Computerized ACCA MJ8 Equipment Replacement Estimate </a></li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
     <ul>
<li><a href="#">Commercial Refrigeration Service Agreements</a></li>
<li><a href="#">Commercial Rooftop Service Agreements</a></li>
<li><a href="#">Commercial Ice Machine Service Agreements</a></li>
<li><a href="#">Residential Air Conditioning Service Agreements</a></li>
<li><a href="#">Residential Boiler Service Agreements</a></li>
<li><a href="#">Residential Furnace and IAQ Service Agreements</a></li>
<li><a href="#">Heat Pump Service Agreements</a></li>
</ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Products</a>
     <ul>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Refrigeration</a>
         <ul>
           <li><a href="#">Beverage Air</a></li>
           <li><a href="#">Beacon Smart Controller</a></li>
           <li><a href="#">Continental</a></li>
           <li><a href="#">Crown Tonka Walk Ins</a></li>
           <li><a href="#">Delfield</a></li>
           <li><a href="#">Heatcraft Refrigeration</a></li>
           <li><a href="#">Hoshizaki Refrigeration</a></li>
<li><a href="#">International Cold Storage</a></li>
<li><a href="#">Kelvinator</a></li>
<li><a href="#">Kolpak</a></li>
<li><a href="#">Larkin Refrigeration</a></li>
<li><a href="#">Perlik Bar and Beverage Equipment</a></li>
<li><a href="#">True Refrigeration</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Rooftop</a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Ice Machine</a>
         <ul>
           <li><a href="#">Hoshizaki Ice Machines</a></li>
           <li><a href="#">Manitowoc Ice Machines</a></li>
           <li><a href="#">Scotsman Ice Machines</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Air Conditioning</a>
         <ul>
           <li><a href="html/subzero/arcoaireaircondioning.html">Arcoaire</a></li>
           <li><a href="html/subzero/americanstandardairconditioning.html">American Standard</a></li>
           <li><a href="html/subzero/mitsubishiairconditioners.html">Mitsubishi</a></li>
         </ul>
     </li>
       <li><a href="#" class="MenuBarItemSubmenu">Boiler </a>
         <ul>
           <li><a href="#">Weil McLain Residential</a></li>
           <li><a href="#">Weil McLain Commercial</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Furnace </a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
           <li><a href="#">Mitsubishi</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Heat Pump </a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
           <li><a href="#">Mitsubishi</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Indoor Air Quality</a>
         <ul>
           <li><a href="#">Aprilaire Humidifiers</a></li>
           <li><a href="#">Honeywell Electronic Air Cleaners</a></li>
           <li><a href="#">Honeywell Thermostats</a></li>
         </ul>
   </li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Job Photos</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Cool Savings</a>
     <ul>
       <li><a href="#">Monthly Specials</a></li>
       <li><a href="#">Manufacturers Rebates</a></li>
       <li><a href="#">Utility Rebates</a></li>
       <li><a href="#">Website Coupons</a></li>
<li><a href="#">Customer Referral Program</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Social</a>
     <ul>
       <li><a href="#">"LIKE" Us on Facebook</a></li>
       <li><a href="#">"FOLLOW" Us on Twitter</a></li>
<li><a href="#">Facebook Disclaimer</a></li>
     </ul>
</li>
<li><a class="MenuBarItem" href="#">Contact Us</a> </li>
</ul>
<p><br />
</p>
<div class="sidebar1"><img src="Images/home.jpg" alt="Home Page Photo" width="105" height="240" /></div></div>
<div class="content">
    <h1>Instructions</h1>
    <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h1>Clearing Method</h1>
    <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    <h4>Backgrounds</h4>
    <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
    </div>
<div class="footer">
    <table width="960" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="102" scope="col"> </th>
        <th width="101" scope="col"> </th>
        <th width="106" scope="col"> </th>
        <th width="120" scope="col"> </th>
        <th width="172" scope="col"> </th>
        <th width="120" scope="col"> </th>
        <th width="103" scope="col"> </th>
        <th width="136" scope="col"> </th>
      </tr>
      <tr>
        <td colspan="2"><img src="Images/van.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Service Van" width="243" height="109" align="left" /></td>
        <td colspan="6"><img src="Images/footer_right.jpg" width="717" height="109" alt="Footer" /></td>
      </tr>
    </table>
</div>
<div class="footer2">
    <div class="footer">
    <table width="960" height="62" border="1" align="center" cellspacing="8">
      <tr valign="middle">
        <th width="234" scope="col">Schedule a Service Call</th>
        <th width="247" scope="col"><p>Schedule Free New Equipment Replacement Estimate</p></th>
        <th width="99" scope="col"><a href="https://www.acca.org/consumer/find-a-contractor" target="_blank"><img src="Images/acca.gif" width="85" height="48" alt="ACCA Sub Zero Refrigeration" /></a></th>
        <th width="94" scope="col"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-and-a-c-in-midlothian-il-7695" target="_blank"><img src="Images/BBB.png" width="87" height="48" alt="Sub Zero Refrigeration BBB A+ Rating" /></a></th>
        <th width="84" scope="col"><a href="http://www.natex.org/" target="_blank"><img src="Images/nate.png" width="76" height="74" alt="NATE Sub Zero Refrigeration" /></a></th>
        <th width="83" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="Images/twitter_logo.jpg" width="69" height="69" alt="Follow us on Twitter" /></a></th>
        <th width="143" scope="col"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="Images/facebook.png" width="81" height="81" alt="" /></a></th>
      </tr>
    </table>
    </div>
    <div class="footer3" id="footer3">
      <div class="footer">
        <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <th width="960" style="background-color: #B7E3EA; font-size: 10px; font-family: Arial, Helvetica, sans-serif" scope="col">Home | About Us | Repair | Sales | Maintenance | Products | Our Job Photos | Cool Savings | Social | Contact Us | Schedule Free New Equipment Estimate | Schedule Service | Site Map<br />
            Search Sub Zero Refrigeration Heating and Air Conditioning<br />            </th>
          </tr>
        </table>
        <p>      Copyright 1999-2013 | Last updated on
          February 19, 2012 | Web designer's - Ted Wagner and Cherie White Cachampis      </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>

I seem to have fixed it by putting <div class="clearfloat"></div> after the navigation bar?

Spry menu displays fine in FF and Chrome but not in IE

hello all -
as stated my Spry menu drops down fine (vertical) in FF and Chrome but in IE8 it displays horizontal. pls help & ty!
here is the CSS and an example page-
http://www.thelders.com/BlueRidge/ContactUs.html
@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
#MenuBar1 {
margin:0 auto;
width:876px;
/* 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;
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;
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 #738dbb;
background-color: #ddd9c3;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a {
display: block;
cursor: pointer;
padding:6px 18px;
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 {
/* 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: #aac0db;
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;

First off read the notice on the index page of this forum
Announcement: Introducing Spry UI
Then add the following style rules to your document
ul.MenuBarHorizontal li {
width: 8em;
ul.MenuBarHorizontal ul {
width: 8.2em;
I hope this helps.
Ben

Spry menu Bar I.E. positioning issues?

Hi,
I, like many folks I've seen on various forums have the same problem with my spry menu appearing at the top of I.E browsers instead of under the menu bar. I've tried all sorts of fixes that I've found and have updated to the latest version of Spry. I am using CS3. Could anyone please, please help? I'm not sure where else to go as I've spent the last week on the web trying to resolve the issue. Everything works great on Safari and Firefox. My URL is http://www.visiongreeninvestments.org
Thanks in advance to anyone who can point me in the right direction.
My CSS is:
@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;
/* 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: 130px;
    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;
    background-image: none;
ul.MenuBarHorizontal ul li a
    width: 7.8em;
    background-image: none;
    background-color: #669933;
/* 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: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #669933;
    color: #000066;
    text-decoration: none;
    font-family: Times;
    font-size: 14px;
    font-weight: normal;
    background-image: url(../homepagelayout/greenbarbg.jpg);
    background-repeat: repeat;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: 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: #669933;
    color: #FFF;
    background-image: none;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #669933;
    color: #FFF;
    background-image: none;
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(../homepagelayout/greenbarbg.jpg);
    background-repeat: repeat;
    background-color: #669933;
/* 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: none;
    background-position: 95% 50%;
    background-color: #669933;
/* 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: none;
    background-position: 95% 50%;
    background-color: #669933;
/* 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: none;
    background-repeat: repeat;
    background-position: 95% 50%;
    background-color: #669933;
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;
    /*insert this bracket/*

I see that the online version has already been upgraded to Spry 1.61 and that it now works.
Gramps
PS Before you change anything, have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one. This will ensure that you don't make a mess of it this time around.

Spry Menu Invisible in IE

Similar Messages

Maybe you are looking for