Positioning sub menu not correct in IE

Hi,
The site is: jdanielfamily.org
The sub menu is positioned on top of the main menu in IE, work correctly in Firefox and Safari.
I have ul.MenuBarVertical ul set the same way as I have in other sites that work correctly.
What an I doing wrong?
Thanks

Just found my mistake.
ul.MenuBarVertical: Width was set at 9 px, changed to 9 em. Works correct now, thanks.

Similar Messages

Mail sub menu not woring in OWA 2013

Hi,
I have an issue with OWA on a new Exchange 2013 CU6 server running Server 2012 R2. When I try to browse to Options>Settings>Mail the page is blank. All functionality in OWA seems to work fine except for the "Mail" sub menu. When I looked
at the source code of the page I can see that it points to epc/customize/Messaging.aspx. When I then tried to open this aspx file by browsing to the path https://localhost:444/ecp/Customize/messaging.aspx it is blank but not when I do this for one of the other
options such as Calendar.
Anyone came across this issue before?
Thanks,
Graham

Hi,
Please login Outlook client to check this problem. If Outlook works well, it may cause by IIS or the web.config file.
Since we can logon OWA, so it not caused by IIS. However, let us try to force restart IIS. If the issue due to IIS, I think all the other virtual directories will not work fine, such as EWS, ECP. If OWA works fine ever, please try
to recover this folder.
C:\Program Files\Microsoft\Exchange Server\V15\ClientAccess\Owa
After that, restart IIS.
Best Regards.

Sub menu not getting focus/highlighted

Hi,
I am facing issue where Sub Menu dosent get highlighed
I have followed following steps
I have created a new customized page.
Then I have created a function for this customized page
I have included this function in Menu
So when i navigate to the desired menu,i can see my sub menu.
Once i click on the sub menu my page gets displayed.
Only issue I am facing is that My sub menu is not getting highlighted (When i click
on Oracle Sub menus they do get highlighted)
Do i need to set some attributes at PageLayout ? Any clues ?
Thanks,

Within your processRequest, please call pageContext.resetMenuContext and pass your menu function name.
pageContext.resetMenuContext("MY_MENU_FUNCTION");

Website menu not correct show wit ipad/imac

Dear sir,
This is mayby not the wright place to ask this question (sorry).
The website www.a2models.nl is shown correct in all browsers on a pc, buth when I look with an ipad/imac with safari, the end of the horizontal menu moves below.
The homepage in Dutch and English is made with Dreamweaver. I integrated a webshop from Mijn Webwinkel (Logivert).
The layout.html is made by a webshopdevelopper, but can't/won't help me, because I've made a little change in the layout (only a horizontal menu in red).
The container is 700px I've tried to make it bigger but it didn't help or made the with auto which also didn't help.
Took some space but this didn't help.
What am I doing wrong?
Thank you verry much for your reply.
Carla

Not much to go on there.
You basically said it is broken with no link to see it , no information on how it is built or anything
Literrally could be 100's of reason for incorect css, malformed html, javascript error and more.
You need to at least post a link so people can take a look.

Spry Sub-Menu not loading on iPhone

It seems to work well when opened in Firefox, IE and Chrome. However, I tried to pull up on my iPhone and it appears to be hidden. Is there anything I can do about this? Barring starting over? Surely I'm not the only one with this problem.
http://www.webtivity.me/lpoa/Publish/index.html

The extra files are purely educative where you can see the different widgets being implemented. If you want to see these examples, create a new site in DW and place those files in there. Use F12 to preview in your favourite browser.
If you have followed the instructions, the Spry files in DW will have updated to version 1.6.1. The best way to show those in in your existing document is to rename the SpryAssets folder to SpryAssets_BU or similar. Then open a new document called junk.html or similar and place a SpryMenuBar in the new document. saving junk.html will cause a new SpryAssets folder to be created at which stage you can delete junk.html.
Now view the real document, test it in your moble and if all works, start on changing the style rules using the CSS file in SprayAssts_BU to assist.
Gramps

Spry Menu not positioned correctly in IE

I've search for a answer to this and it seems to be common but there has been no solution to be found. I have a spry horizontal menu that in FireFox, Safari and Opera opens and functions fine. In IE the menu buttons are in the correct place but the dropdowns are at the top of the screen. The virtical position is correct but the horizontal position is obviously off. I tried to keep the spry code as original as possible and have only altered the css to change font sizes and bkg colors.
Another issue I can't seem to solve is the font sizes for the sub menus. I would like the main buttons to be in bold and every sub menu that opens below to be in a normal font. No matter what I change in the CSS I can't get the fonts to go to normal w/o it altering the fonts in the button above. I hope this make sence. Here is the CSS code I'm working with.
@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: 17px;
    cursor: default;
    width: 800px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width this controls the main menu bar */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 17px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 160px;
    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: -5% 0 0 20%;
    padding: 0;
    list-style-type: none;
    font-size: 10px;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    font-weight: normal;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #000000;
    color: #FFFFFF;
    text-decoration: none;
    width: 162px;
    font-style: oblique;
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
/* 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: #666666;
    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: #999999;
    color: #FFF;
/*My Menu bar test css*/
ul.testtext
    color:#006699;
    font-size:12px;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Because you have centered the menu items you need to take special care not to upset the apple cart.
To center the menu items properly have a look here: http://foundationphp.com/tutorials/sprymenu/centering.php and while you are at it have a look at customizing a Spry menu as well.
After you have done that and made the appropriate chenges, please return here with further questions.
Ben

Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

If this happens on monitor 2 of 2, this problem has been solved here:
http://support.mozilla.com/en-US/questions/794823#answer-157988
Go to "Firefox"--> "Options" --> "Advanced"
Then un-check "Use hardware acceleration when available"
While not verified, I believe this problem is due to an SLI configuration where the focus is on monitor 1. (I.e acceleration is available, but only on monitor 1.)

DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8

Hi,
I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
It works well in Google Chrome.
It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
The menu can be seen at work by clicking on this link:
www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
Below are all the scrips involved.
Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
/* 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: 10;
    padding: 0;
    list-style-type: none;
    font-size: 80%;
    cursor: default;
    width: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    /*whole menu moves*/
    margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    /* My note --I added the height and background-image as Main-Buttons.jpg-- */
    height: 55px;
    background-image: url(../Main-Buttons.jpg);
    margin: -2;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: center;
    /*text-align: left;*/
    cursor: pointer;
    width: 99px;
    float: left;
/* My note --Submenu font size adjust-- */
/* 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
    /*height:38px;*/
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 87%;
    z-index: 1020;
    cursor: default;
    width: 160px;
    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
    /* My note --this margin alligns the drop buttons up and down-- */
    margin-top: 24px;
    height: 25px;
    left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    height: 25px;
    width: 160px;
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    /*height: 40px;*/
    text-align: center;
    /*vertical-align: center;*/
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    text-decoration: none;
    /*zzzzzzzz Text Color*/
    color: #333;        /*background-color: #CCC;*/
    letter-spacing: -0.00px;
    margin-left: 1px;
    margin-right: 0px;
    /*alligns text up or down globally*/
    margin-top: 1px;
/* 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: #33C;
    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-image: url(../Main-Buttons-mouse-over.jpg);    /*background-color: #33C;
    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-repeat: no-repeat;
    background-position: 95% 50%;
/* My note --mouse over-- */
/* 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;
Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
// SpryMenuBar.js - version 0.12 - 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.
var Spry; if (!Spry) 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];
And last, here is the HTML code that has also not been modified in any way:
<!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>
<script src="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
    <ul>
      <li><a href="#">Shop from Private Owner</a></li>
      <li><a href="#">Shop Direct from Stores</a></li>
      <li><a href="#">Help Buying</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
    <ul>
      <li><a href="#">Shop from Auction</a></li>
      <li><a href="#">Help Bidding</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
    <ul>
      <li><a href="#">Shop for Trades</a></li>
      <li><a href="#">Help Trading</a></li>
    </ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
    <ul>
      <li><a href="#">List Items in Auction</a></li>
      <li><a href="#">List Items for Sale</a></li>
      <li><a href="#">List Items for Trade</a></li>
      <li><a href="#">Help Listing Items</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
    <ul>
      <li><a href="#">Flash Site &amp; Intro</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
    <ul>
      <li><a href="#">Activity</a></li>
      <li><a href="#">Account</a></li>
      <li><a href="#">Mail</a></li>
    </ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
    <ul>
      <li><a href="#">Main Help</a></li>
      <li><a href="#">Site Map</a></li>
    </ul>
</li>
</ul>
<script type="text/javascript">

</script>
</body>
</html>
Thanks in advance for any of your help.
Jose H.

Hello Nancy,
I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now. Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
By the way.. the IE8 security measure did pop up while working from the server.
Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
Good luck.. as I know it can become a complicated task when creating custom Spry menus.
<b>Here is the finished CSS script</b>
<code>@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 10;
    padding: 0;
    list-style-type: none;
    /* font size for top menu*/
    font-size: 80%;
    cursor: default;
    width: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    /*whole menu moves*/
    margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    /* My note --I added the height and background-image as Main-Buttons.jpg-- */
    height: 55px;
    background-image: url(../Main-Buttons.jpg);
    margin: -2;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: center;
    /*text-align: left;*/
    cursor: pointer;
    width: 99px;
    float: left;
/* My note --Submenu font size adjust-- */
/* 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: 87%;
    z-index: 1020;
    cursor: default;
    width: 160px;
    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
    /* My note --this margin alligns the drop buttons up and down-- */
    margin-top: 0px;
    height: 25px;
    left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    height: 25px;
    width: 162px;
    /* New addition */
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    /*My note -- took out borders & changed text color to #333(black)& added my own mouse not over image-- */
    /*border: 0px solid #333332;*/
    background-image: url(../Main-Buttons.jpg);
    /*height: 40px;*/
    text-align: center;
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    text-decoration: none;
    /*My note --Text Color-- */
    color: #333;        /*background-color: was #CCC;*/
    letter-spacing: -0.00px;
    margin-left: 1px;
    margin-right: 0px;
    /*alligns text up or down globally*/
    margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    /* My note --took out all backgound & text color for mouse over-- */
    /*background-color: #33C;
    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
    /*My note -- took out background & text & added my own mouse over image-- */
    background-image: url(../Main-Buttons-mouse-over.jpg);
    /*background-color: #33C;
    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
    /* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
    height: 40px;
    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-repeat: no-repeat;
    background-position: 95% 50%;
/* My note --mouse over-- */
/* 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;
        /* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
        background: #3e6487;
</code>
<b>Here is the modified HTML script</b>
<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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
    <ul>
      <li><a href="#">Shop from Private Owner</a></li>
      <li><a href="#">Shop Direct from Stores</a></li>
      <li><a href="#">Help Buying</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
    <ul>
      <li><a href="#">Shop from Auction</a></li>
      <li><a href="#">Help Bidding</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
    <ul>
      <li><a href="#">Shop for Trades</a></li>
      <li><a href="#">Help Trading</a></li>
    </ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
    <ul>
      <li><a href="#">List Items in Auction</a></li>
      <li><a href="#">List Items for Sale</a></li>
      <li><a href="#">List Items for Trade</a></li>
      <li><a href="#">Help Listing Items</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
    <ul>
      <li><a href="#">Flash Site &amp; Intro</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
    <ul>
      <li><a href="#">Activity</a></li>
      <li><a href="#">Account</a></li>
      <li><a href="#">Mail</a></li>
    </ul>
</li>

<li><a href="#" class="MenuBarItemSubmenu">Contact Us</a>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
    <ul>
      <li><a href="#">Main Help</a></li>
      <li><a href="#">Site Map</a></li>
    </ul>
</li>
</ul>
<script type="text/javascript">

</script>
</body>
</html>
</code>
And Richard.. Thanks again for the time and your help, truly appreciated.
Jose H.

Positioning of spry sub menu in IE8

Hi - can anyone help with an IE8 issue concerning Spry? I have created a menu here:
http://www.clinicafiore.co.uk/jan2012/indexJan2012_1.html
In all the browsers I have tested (Chrome,FF,Safari,Opera) on Mac and PC platforms it works fine. In IE8 it doesn't (hooray).
The critical attribute is:
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 189px;
top: 0;
I.e. I have pushed the sub-menu out 189px when visible and set the top value to 0 thinking this would align the sub-menu with the top of the main menu item.
Is there a better way to do this to cover all browsers or do I need some conditional code for IE?
Really.really grateful for any help
For good measure here's all the html & the css
HTML
<div id="leftNav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" title="ageing body" class="MenuBarItemSubmenu">AGEING BODY</a>
        <ul>
          <li><a href="#">Ageing Décolleté</a></li>
          <li><a href="#">Ageing Hands</a></li>
          <li><a href="#">Ageing Neck</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">ageing face</a>
        <ul>
          <li><a href="#">Ageing Lips</a></li>
          <li><a href="#">Double Chin</a></li>
          <li><a href="#">Downturned Mouth</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>
CSS
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 0.9em;
          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: 0.9em;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 189px;
          float: left;
          font-weight: bold;
          text-transform: uppercase;
/* 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: 189px;
          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: 189px;
          top: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 189px;
          font-weight: normal;
          text-transform: none;
/* 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;
          font-weight: normal;
          text-transform: none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #aee56b;
          padding: 0.5em 0.75em;
          color: #333;
          text-decoration: none;
          border-bottom-width: thin;
          border-bottom-style: dotted;
          border-bottom-color: #FFF;
/* 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: #999999;
          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: #999999;
          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(SpryMenuBarRight.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(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 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;

I may be misinterpreting what it is that you want, partly because I thought we were talking horizontal menu and you point out a vertical menu.
I think that you used the vertical menu as an illustration to shopw how you want the submenu alligned. If that is correct, then please copy an paste the following into a new document and see the result in an IE8 browser.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal ul {margin-left: 8em; margin-top: -35px;}
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
If the above is not what you want, then please explain.
Gramps

Cursor selection does not follow chapter order on sub-menu

I used iMovieHD6 to add chapter markers to my large DVD project. They "shared" very nicely into iDVD8 and the Chapter Selection sub-menus were created nicely.
The problem is that when I use the cursor arrows on the DVD remote (real or virtual, in or out of iDVD), the highlight jumps around the sub-menu items rather than moving in a logical order. For example, I have 4 sub-menus with 6 chapters in each. Let's use numbers for them starting with the upper left they are 1,2,3 and then at the lower left they begin 4,5,6. I am using the Reflection White theme. When I press the right remote cursor button it will move from 1 to 2 to 5 to 6 to 3 to 4 and back to 1. Note that this order is not the same for each sub-menu, but none of them go 1,2,3,4,5,6.
I don't know what might be wrong or how to correct it, but I have a really big project that is otherwise perfect and I'd really like to get it out, please help!
Thanks.

I just wanted to add this before closing this topic.
After poking around with the Reflection theme I better understood what Len was talking about. It appears that there are no modifiable parameters in the theme itself that control the order of cursor's motion through the buttons. That I assume is hard-coded into iDVD and follows a pre-programmed logic.
The point of failure is the position and orientation of the buttons in the Reflection theme's sub-menus when added automatically. They are made to look to the viewer as though they are set on an angled surface and viewed at an angle from above. While our brains can process this effect nicely, iDVD's cursor logic doesn't fare as well.
The work-around is fairly simple: Realizing that iDVD treats all chapter buttons as though they are two-dimensional objects on a flat surface, you must re-arrange them so that from top-left to bottom-right they follow a logical order, with the first buttons higher and farther left than the later-selected buttons. You don't have to move them very far to get the desired result and it doesn't have to affect the overall appearance of the menu in a noticeable way.
A slight rearrangement in my case left the overall look of the chapter menu the same but yielded a zig-zag flow through the buttons as follows:
[1] [3] [5]
[2] [4] [6]
Pressing the right cursor key jumps from top left to bottom left to top center then bottom center then top right and finally bottom right before going back to the start. Granted this is not quite "right" in that if iDVD could "see" the menu the way my brain does it would go left to right across the upper row of buttons rather than zig-zagging, but I figure that as long as the user can understand how to get to the button they want it'll be fine.
If you really need your menu selection to move linearly left to right with those arrows and with the up/down arrow used to move it vertically, then you have to arrange the buttons on the menu in a rectangular pattern with the top of each row of buttons all in a nice horizontal line. Note that's not the same as the alignment line that Reflection provides for you, it's a true horizontal line in relation to the monitor screen.
I'd much prefer that iDVD revisit the logic of the cursor control code, perhaps adding the choice of allowing the numerical sequence of the chapters to dictate the order of the cursor's motion rather than their relative position on the screen, but since they don't call me for advice, the above will likely have to do.

Widget menu not displaying correctly

Hi,
I've created a web site and uploaded it to the FTP server to check it works OK and I've found the home page menu doesn't display correctly, but every other page is OK.
The drop down 'sub-menu' is getting clogged up in it's layout.
See here:
all the other pages display correctly and look like this:
Because the menu is generated by Muse as a widget, (I've just edited colours etc) why should 1 page display differently to the others?
I have this in the Master file, so I'm not making duplicate menus on each seperate page... the one widget serves all the pages.
Any ideas?
Thanks a lot.

If you have inserted the menu on the Master page, then ideally it should appear even and remain unselectable/uneditable on all of the content pages.
Does the menu appear distorted in Design mode for the homepage too or only when you preview in browser/after publish?
I believe you're using the "All Pages" menu type and by looking at the screenshots, it appears that the Products menu item is overlapping the Education menu item. Did you try making a copy or delete the menu and re-insert in Master page? Can you do a Select All on the Home page and check if you don't have an identical but mis-aligned manual menu overlapping the original menu?
If the problem persists, can you share a link to the website for us to have a look?
Thanks,
Vinayak

Spry Horizontal Menu not displayed correctly in Internet Explorer 6

Hello to everyone. I'm creating a website using David's tutorial. My Spry Horizontal Menu is correctly shown in Dreamweaver Live View, Firefox10 but not in IE6. It happears at the bottom of the page. Any advise? Thanks much in advance. Cecilia

Hello Cecilia,
please have a look here: http://gs.statcounter.com/#browser_version-ww-monthly-201201-201202-bar where you can see that this browser (IE6 ) is no longer in use and might not be used anywhere anymore.
And so you should not worry about this. But if it does please send a link to your website in question.
... and what's about the newer IE?
Hans-Günter

The stack sub menu does not enable for stacked photos in elements organizer 13 on windows 8.1

The stack sub menu does not enable for stacked photos in elements organizer 13 on windows 8.1.
Has anyone else experienced this?
I stacked some photos, now I cannot expand them or unstack them in the organizer.
This is for both auto and manual stacking.

Please press Ctrl+D to move to the older grid and now the stack option should be enabled.
Thanks,
Anwesha

Text positioning not correct while typing in Flex Mobile Text Area

When I try to write text in Flex mobile TextArea, the text positioning is not correct. What might be the issue? Do I need to specify some Skin Class for it?

Could be that the font doesn't have Hindi chars support and the text you paste is HTML chars.
You could try to embed a font you know has the appropriate chars and use that for global and Applications CSS classes.

Spry menu does not show sub menu on iPhone

Hi there,
Spry menu bar from CS6 does not show sub menu on iPhone. Please help.
Thanks,
Tee
<TA

I was debating Sudarshan's
if your Spry menu is triggered on 'hover', it will not work on an iPhone as touch-screen phones cant do 'hover'.
any menu with NO hover (mouseover) effect or trigger will work on touchscreen devices. Pick a menu plug-in that doesn't have any associations to 'hover' factor.
as most touch-enabled menus will still contain hover rules or mouseover javascript handles. Even most JQuery menus will contain :hover rules.
There is no disagreement about that with you, Al.

Positioning sub menu not correct in IE

Similar Messages

Maybe you are looking for