Setting Up Menu Bars On Dual Displays

My grandma recently upgraded computers and gave me her old 22" Chimei LCD monitor. I bought the DVI-D attachment and have the monitor hooked up to my Macbook.
My question is.. is there a way (program, setting, etc.) to set up a menu bar on both screens? I found in the settings where I can choose the "primary screen" which places the dock and menu bar on that screen.. but is there a way to get a menu bar (and/or a dock for that matter) on the second monitor? It's not a big issue but it'd be nice when I have a program open on my second monitor, if I could just scroll to the top when I need something from the menu bar instead of having to drag over to the other/primary screen.
I found some links recommending DejaMenu which would work but I'm still curious if anyone knows a way to add a second menu bar instead...
Hope this makes sense!
Thanks y'all.

There is something called SecondBar but it looks kind of iffy.
http://blog.boastr.net/?page_id=79

Similar Messages

Need menu bar on BOTH displays when using external monitor

How can I have the menu bar on BOTH displays without using the "Mirror Display" mode???
I bought a Thunderbolt and use it with my MBA. It works fine overall but this is still like having one display instead of two. A real downer!!
There are 2 modes:
Mirror Displays: (identical screen: why waste valuable screen realestate?)
"Normal" mode: where it gives you access to the 2 monitors independently (you can move apps. windows and locate them on any screen you want).
In the "Normal" mode, you can move the menu bar from one display to the other but it does not resolve the problem. We need TWO menu bars, which work identical and can be used on whatever display the mouse cursor happens to be.
Currently, let's say I have applications A & B displaying on MBA, applications C & D displaying on TB, and the Menu Bar on TB. It is a nightmare to work!!!! Anytime I want to work on A or B I have to move the mouse side way to get to the MBA, then to use the menu, I can't even move up into the TB all the way to the menu bar: I have to move through the side onto the TB then up to the menu bar, select, down through the TB, side way to the MBA, and on and on and on....
Anybody knows how to duplicate a functional menu bar without Mirror Display?
Anyway of simplifying this nightmare?
Thanks

I asked the same question a few days ago, got some other options then ...
https://discussions.apple.com/message/16953617#16953617
Many many things to try ...

Srpy menu bar will not display

Was working away on modifying a spry menu bar when all of a
sudden the menu bar will not display. Tried creating a new page and
inserting the menu bar and still will not display. Won't even
display in previous pages created.
Anybody have any ideas?
Thanks

The following code calls the MenuBar widget into your
document, but the widget will not be found, if the code that I
provided you is not properly formatted.
<script type="text/javascript">

</script>
When I insert a SPRY widget into my document the Javascript
and CSS files that construct and determine the appearance of the
widget are automatically placed into a folder called SpryAssets. My
document is housed in a different folder. Thus, I must exit the
folder in which my document is contained before entering the
SpryAssets folder. When I read your href attribute it appears that
your SpryAsset folder and your document are located in the same
directory folder. If this is true, then I do not understand why
your widget does not appear.
I can offer two additional suggestions, and then my knowledge
of what might be wrong is exhausted:
1) If possible insert the widget again using a previous
version of your document in which the widget has not already been
inserted.
2) Always make sure that your document has been saved at
least once before inserting a SPRY object. This will insure that
everything is properly linked when the widget is inserted.
In the meantime, maybe someone more knowledgeable than I will
be able to help.

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.

My spry horizontal menu bar is now displaying vertical. How do I fix it?

My horizontal spry menu bar displays correctly at http://www.matthewvandyke.com/ar/photos/ but displays vertical at http://www.matthewvandyke.com/ar/about.html. It started doing this a few days ago and I am not sure why.
Can anyone take a look at this code and tell me why this would be happening?
Here is the code:
about.html
(the relevant code from this page)
<div id="topNavigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="الصفحة" _mce_href="http://www.matthewvandyke.com/ar/">الصفحة">http://www.matthewvandyke.com/ar/"> الصفحة الرئيسية</a></li>
      <li><a href="حول" _mce_href="http://www.matthewvandyke.com/about.html">حول">http://www.matthewvandyke.com/a bout.html">حول ماثيو فاندايك</a></li>
      <li><a href="الكتابhttp://www.matthewvandyke.com/book.html">الكتاب</a></li>
      <li><a href="الفيلمhttp://www.matthewvandyke.com/film.html">الفيلم</a></li>
      <li><a href="مقاتل" _mce_href="http://www.matthewvandyke.com/about.html#freedom-fighter">مقاتل">http://www.ma tthewvandyke.com/about.html#freedom-fighter">مقاتل الحرية</a></li>
      <li><a href="مغامراتhttp://www.matthewvandyke.com/about.html#adventures">مغامرات</a></li>
      <li><a href="تحليلاتhttp://www.matthewvandyke.com/analyst.html">تحليلات</a></li>
      <li><a href="الحقائقhttp://www.matthewvandyke.com/the-facts.html">الحقائق</a></li>
      <li><a href="الصورhttp://www.matthewvandyke.com/ar/photos/">الصور</a></li>
      <li><a href="الفيديوhttp://www.matthewvandyke.com/video/">الفيديو</a></li>
      <li><a href="المدونةhttp://www.matthewvandyke.com/blog/">المدونة</a></li>
      <li><a href="الصحافةhttp://www.matthewvandyke.com/press.html">الصحافة</a></li>
      <li><a href="الأحداث" _mce_href="http://www.matthewvandyke.com/events/">الأحداث">http://www.matthewvandyke.com/ events/">الأحداث والمناسبات</a></li>
      <li><a href="الرعاةhttp://www.matthewvandyke.com/sponsors/">الرعاة</a></li>
      <li><a href="وسائل" _mce_href="http://www.matthewvandyke.com/social-media.html">وسائل">http://www.matthewvand yke.com/social-media.html">وسائل الإعلام الاجتماعية</a></li>
    </ul>
</div>
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: 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 .15em;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
display: block;
float: none;
width: auto;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 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;
padding: 0.4em 0.15em;
color: #FFFFFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #d6c7a6;
color: #000;
/* 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: #d6c7a6;
color: #000;
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%;
padding: 0.4em 0.15em;
/* 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;
SpryMenuBar.js
// 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];

I have not seen your error in either my IE or my chrome. I do note that you are using a "strict" Document Type Declaration.
You might try a transitional DTD, which should be more forgiving than the strict:
<!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">
Other than that, I don't see anything particular (because I don't see the error, either) that would cause the menu to drop vertically instead of horizontally.
Beth

Is it possible to turn off the menu bar on secondary display?

I have upgraded to Mavericks on an iMac used exclusively for presentations (not mirrored) and now the menu bar shows up dimmed on the presentation screen if there is not a presentation currently playing. I have not found any setting for turning off for that display. Can it be done? If not Apple please add this option ASAP because it looks very unprofessional to have the menu bar pop-up on the presentation display in between presentations.
Has anyone found a solution to this problem?
-Michael Wheeler

It worked but needed some further finessing to perfect.
After unchecking "Displays have separate Spaces" and logging out and back in the menu bar was gone but however now it showed the same desktop picture as was on the primary display. That was highly undesireable as I was trying to get rid of anything being shown on the projection screen when a slide show was not playing.
I played around with the "Desktop & Screen Saver" preference pane and discovered that I could still change the Desktop pictures of each display separately -- whew! I was worried there for a while. Not sure why it didn't just keep the original solid black desktop setting for that display as that would have been ideal but I was able to change it back to the solid black setting as before and now it just looks like the projection screen is off whenever a slide show is not playing -- perfect!
Let me just say to Apple that the whole process was very unintuitive and couldn've been solved with just a simple checkbox in the "Displays" preference pane to turn off the menu bar for the alternate display. So may I kindly suggest you consider adding some sort of option to do that in the Displays preference pane where it would be much more intiuitive than "Mission Control --> Uncheck Deisplays have separate Spaces."
Thanks again for you help!

Menu Bar & Clock wont display AM / PM at all

How the flip do you get an AM / PM to display in the menu bar clock ?? My PB used too.
The option is greyed out and I have used International to set up AM/PM for the short time display.
Annoying but not life threatening...
cheers

Go to the International Pane in System Preferences and select the Format tab.
Click on 'Customise … ' in the Dates section, and decide how you want the date to look. Note the drop down menu where you can choose from Short, Medium, Long and Full. Once you've decided, and have the date format as you want it, click, drag and copy to the clipboard.
Now to the Time section. Note that you can choose how you want the hours to appear in 12-hour/24-hour clock time: 0-11, 00-11, 0-12, 00-12 etc.
You can have am/pm in uppercase or lowercase - type into the fields at the bottom of the window. Drag the blue am/pm button to the entry bar after the minutes, or seconds if you have them.
You can add spaces, colons etc to suit the look of it all as you wish.
After that, paste from the clipboard so you have the full Monty, both Time and Date, and click OK to close the window.
(If you decided to insert the day during the customising process, you might have the day at the beginning as well, in abbreviated form. Just go to the Date & Time Pane and uncheck 'Show day of the week'.)

Can't see menu bar on external display

I just attached my MacBook running 10.6.2 an lcd flat screen hd tv. Everything is fine other than I can't see the menu bar. I've changed to every resolution available, but the menubar is never visible. It's there, because if I use my (wireless) mouse and put it off the top of the screen and click, I can get menus to open.
Has anyone run into this problem and have you found a solution?
Thanks!

Right, your TV is overscanning. That's very common. Overscan has been part of what TVs have done for decades.
If your TV is meant to be compatible with computer output, there should be a way to set the screen size using the TV's remote and/or menu system so that computer output just fills the screen. So check you TV's user manual about making a connection to a PC for information about how to get rid of overscan on the TV.

Menu bar won't display date

Yes, I have checked the 'diplay date and time in menu bar'option in system preferences; the time is there, but I really need the date as well. When I click on the time in the menu bar, I can see the date, but it's gray, as if it were inoperative.
Also, as long as you're reading, maybe you could suggest how I can change the preferences in mail to check spelling as I type; this is also gray...
Thanks!

Mike
How long has this method been available? is it a Tiger feature or has it been there all alongThis method was available in Panther although it was trickier to get right using the GUI. There was a different method in Jaguar and earlier, which used different format strings.
My finder modification dates have gone haywire after doing the menu date change.Where exactly are you viewing these dates?
I still have the problem after deleting the system prefs plist.I think Scott gave you the wrong preference list. These formats are stored in an invisible preference file: "~/Library/Preferences/.GlobalPreferences.plist " (that's the one in your Home Library folder). But there are four formats. The Menu Bar Clock uses the second one, you may have inadvertently changed one of the others.
Open the Terminal (from /Applications/Utilities) and copy and paste the following into the Terminal window followed by a return:
defaults read -g AppleICUTimeFormatStringsCopy and paste the result from the Terminal window to a post here. For reference, this is what I get:
<pre>{
1 = "h':'mm' 'a";
2 = "d MMM, h':'mm':'ss' 'a";
3 = "h':'mm':'ss' 'a z";
4 = "h':'mm':'ss' 'a z";
}</pre>where you can see the second format is modified to have the date as well as the time. If any of #1, #3 or #4 differ from mine, I can give you a command to set it right.
You can find more detail in this User Tip: Date and Time in the Menu Bar (10.3, 10.4) and if you are interested in how things have changed, this is the equivalent for 10.2 and 10.1: Date and Time in the Menu Bar (10.2).

I think I crashed my Finder - Menu bar won't display, Finder windows either

Help!
I attached a new external HD yesterday (a Western Digital MyBook) to use as the Time Machine disk. Started a brand new backup and went out. When I got back to the house, about 14 of 250 GB had backed up but the system had hung -- no amount of key presses got anything working -- it was just hung, stuck, dead. Against my better judgment I switched off the power strip everything is plugged into and re-booted.
System came back up, but when I click the Finder or Trash icons in the dock, nothing happens. I've also got no menu bar, unless an app is running -- then I have that app's menus but not the finder ones. Also, icons for internal HD, both external HDs, MobileMe disk, etc -- don't display on the desktop and there's no way to get at them, it appears.
Is there some sort of bootup routine I can try or do I need to re-install Leopard? The Time Machine backup started over and seems to be progressing normally. If I let this finish, will I be able to restore my system that way?
Thanks everyone...
-- Scott

And, I just answered my own question. I repaired the disk permissions (for my internal HD) with Disk Utility and now everything is back to normal. I wiped the External HD and started the Time Machine backup again and so far, so good...
Should anyone find this useful...
-- Scott

HT1199 Menu bar will not display time

My menu wsuddenly no longer displys time and other things on the top right of the menu bar. I have gone in and reset time and even locked it but still does not display time and is then unlocked when I return to try again.
Help!

Hello Riley,
Apple Menu Bar Icons Gone...
Safe Boot from the HD, (holding Shift key down at bootup), run Disk Utility in Applications>Utilities, then highlight your drive, click on Repair Permissions.
PS. Safe boot may stay on the gray radian for a long time, let it go, it's trying to repair the Hard Drive
You've probably got a couple of corrupt preference files.
Move these files to the Desktop for now...
/Users/<yourname>/Library/Preferences/com.apple.systempreferences.plist
/Users/<yourname>/Library/Preferences>com.apple.systemuiserver.plist
/Users/<yourname>/Library/Preferences/ByHost>com.apple.systemuiserver.xxx.plist
where 'xxx' is a 12 digit (hexadecimal) numeric string.
Reboot.
This will reset your Menu Bar to the default, you'll need to go through System Preferences to reset the ones you need. (If they are already checked, uncheck them first and then recheck them).

The "Remember Password" volatile menu bar no longer displays when I enter a required site login/password data.

When I attempt to log into a site that requires login / password data, the pop-up menu bar that would ask whether to save this password data or not momentarily displays then disappears befor I can tick my choice.
I tried re-installing Firefox but that didn't change the situation.
Please help as I can't log into a local server any more that requires login / password credentials.

I restarted the computer and checked what errors it was returning, these are all the errors i got.
May 17 19:54:47 scott-sanders-computer configd[45]: WirelessAirPortDeviceNameCopy(): no AirPort driver found
May 17 19:54:48 scott-sanders-computer shutdown: reboot by scottsanders:
May 17 19:54:48 scott-sanders-computer kernel[0]: (161: ps)tfp: failed on 0:
May 17 19:54:48 scott-sanders-computer SystemStarter[145]: authentication service (153) did not complete successfully
May 17 19:54:48 scott-sanders-computer kernel[0]: (161: ps)tfp: failed on 0:
May 17 19:54:50 scott-sanders-computer kernel[0]: (186: ps)tfp: failed on 0:
May 17 19:54:50 scott-sanders-computer SystemStarter[145]: The following StartupItems failed to properly start:
May 17 19:54:50 scott-sanders-computer kernel[0]: (186: ps)tfp: failed on 0:
May 17 19:54:50 scott-sanders-computer SystemStarter[145]: /System/Library/StartupItems/AuthServer
MacBook Pro Mac OS X (10.4.6)

Menu bar won't display energy saving option on MacBook!!!

After the update one thing I noticed is the menu bar on the macbook (white), from the battery options, there is no option unless you open system preferences to choose from best battery life to custom.
Any Ideas?

Mike
How long has this method been available? is it a Tiger feature or has it been there all alongThis method was available in Panther although it was trickier to get right using the GUI. There was a different method in Jaguar and earlier, which used different format strings.
My finder modification dates have gone haywire after doing the menu date change.Where exactly are you viewing these dates?
I still have the problem after deleting the system prefs plist.I think Scott gave you the wrong preference list. These formats are stored in an invisible preference file: "~/Library/Preferences/.GlobalPreferences.plist " (that's the one in your Home Library folder). But there are four formats. The Menu Bar Clock uses the second one, you may have inadvertently changed one of the others.
Open the Terminal (from /Applications/Utilities) and copy and paste the following into the Terminal window followed by a return:
defaults read -g AppleICUTimeFormatStringsCopy and paste the result from the Terminal window to a post here. For reference, this is what I get:
<pre>{
1 = "h':'mm' 'a";
2 = "d MMM, h':'mm':'ss' 'a";
3 = "h':'mm':'ss' 'a z";
4 = "h':'mm':'ss' 'a z";
}</pre>where you can see the second format is modified to have the date as well as the time. If any of #1, #3 or #4 differ from mine, I can give you a command to set it right.
You can find more detail in this User Tip: Date and Time in the Menu Bar (10.3, 10.4) and if you are interested in how things have changed, this is the equivalent for 10.2 and 10.1: Date and Time in the Menu Bar (10.2).

Mirroring doesn't display in menu bar even with option checked

I have my late 2011 MacBookPro hooked up to an external monitor to extend my workspace at the office. I can go into Displays in the System Preferences and choose to mirror displays. When I check the option to "Show mirroring options in the menu bar when available", no menu bar option shows up. Worked perfectly fine pre-Mavericks.
How can I get the display menu bar options to display on this laptop?
Thanks

Have a look in:
[Your HD]/System/Library/CoreServices/Menu Extras/
for "Bluetooth.menu" and try double-clicking it.
Jools

Menu bar not displaying in Internet Explorer 8

I recently created the webpage http://sterlingfamilyfarm.com/index.html in Dreamweaver CC.
I tested the site with http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/ and all seemed good.
But the menu bar is not displaying in IE8... it's displaying as a bulleted list instead.
Also the footer is not displaying properly (not centered, no background color).
Any help would be greatly appreciated.
Thank you!
Patrick

<header> and <footer> are html5 semantic tags. Old non-html5 browsers (like IE8) don't know how to handle them without a little help.
Add this code to your <head>

Or better yet, download the .js file and add it to your site, then link to it, that way you won't depend on third party servers keeping the file in the same location...
http://code.google.com/p/html5shiv/

Setting Up Menu Bars On Dual Displays

Similar Messages

Maybe you are looking for