Horizontal submenus not dropping down correctly in IE7

Hello, I am hoping somebody can help.
I have a vertical and a horizontal menu bar in my page - the vertical seems to be ok; but the horizontal menubar has submenus and they do not drop down correctly from the menu bar in IE7. They work fine in Firefox.
In my site for net newbies, this submenu is supposed to drop down from the main menu, not appear from the top of the browser.. any ideas?
Thanks for any help
The CSS looks like this:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    background-image: url(C
:\Documents and Settings\Gregory\My Documents\BUILDINGAWEBLIFE_COM\img);
/* 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: 14px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 225px;
    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: 225px;
    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: 225px;
/* 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: #CCCCCC;
    padding: 0.5em 0.75em;
    color: #0000DF;
    text-decoration: none;
    background-image: url(../img/orange.jpg);
    background-position: center center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFFFFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #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-image: url(../img/orange.jpg);
    background-repeat: no-repeat;
    background-position: center 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;
/* 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;

Update to 1.6.1 if that doesn't help, provide us with a online url.

Similar Messages

  • CS6 Spry navigation submenus not dropping down in iPad or smartphone.

    My submenus are revealing correctly when hovering over and clicking through on a desktop (Safari, Chrome, Firefox and IE8).  When I try to navigate on a iPad or iPhone the submenus will not reveal even if I resize the screen. Any advice?  Thanks in advance.

    Spry is no longer being developed or supported by Adobe. You would be better off in the long run if you switched to jQuery (javascript) or CSS for your menus.
    That being said, the reason why it doesn't work on handheld touch devices is because they don't have mice. Since there is no mouse pointer on handhelds, any script that relies on them fails. A  javascript onmouseenter or onmouseover or a css :hover won't do anything on an iPad, iPhone or host of other touch only devices because there is no mouse pointer to fire the function connected to them.
    You will need to rethink your menu systems for touch devices and use css :focus or javascript onclick events so the menu appears when the parent element is tapped.
    The best way to go, in my opinion, would be to create an all css menu system, then use Media Queries based on device resolutions to control if the menu uses :hover for a desktop or :focus for a handheld to fire the submenus. That way your menu would open when a mouse enters the parent button on a desktop and when tapped on a handheld.
    There are really a lot of different ways to go though. Doing a search on jQuery Accordion menus or css accordion menus will bring up a ton of examples and most will have a tutorial on how to implement them, plus you have the added bonus of being able to check their demos out on an iphone before downloading them to ensure they function the way you like.

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

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

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

  • Spry dropdown menu not dropping down and reversing order cs4

    Hi, thank you for reading my post.
    I am having problems with my spry menu bar not dropping down when
    I upload it to my site, I get bulleted lists. When I preview it, it works fine. Also, the menu is in reverse order (??) I've tried retyping it in the opposite order to see if that fixes it, but somehow it goes back to backwards. It should start with home at the left. I am trying to post my code, but it will not let me paste. How do I paste code? Sorry if thats a silly question.
    Thank you

    Hi, thank you for your replies. I set everything to left, which caused it to display correctly in dreamweaver. Thank you! I did enjoy the "wiggle" that I get from the menu items on hover, they move from right to left, will that cause problems if I change one back to right? I still am having trouble getting the menu bar to show on the website, Im still getting bullets.
    How do I put the css files? They might be on the site, but not in the right place, where should they be? I also made another site from the same template, and saved it to a folder in my site so it can be previewed. Will that cause problems? Both spry's are not working..... argh! Thank you to everyone for your help, I appreciate it, this is my first time using the spry menu feature. Thank you for the help on posting code. Here is a link to the site and the code:
    www.holly-parker.com
    JAVA:
    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];
    CSS:
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    cursor: default;
    color: #FCC;
    background-color: #000;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    float: left;
    width: 880px;
    /* 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;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 145.8px;
    background-color: #000;
    color: #FCC;
    float: left;
    /* 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;
    background-color: #000;
    color: #FCC;
    /* 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: 145.8px;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    color: #FCC;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 145.8px;
    clear: left;
    float: left;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: 0;
    top: 0;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #000;
    padding: 0.5em 0.75em;
    color: #FCC;
    /* 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: #333;
    color: #FFF;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
    text-align: right;
    /* 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: #000;
    color: #FCC;
    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%;
    color: #FCC;
    /* 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: #000;
    Home page code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Holly Parker - Fashion, Commercial, Swim, Runway Model Los Angeles</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="mainstyling" -->
    <style type="text/css">
    <!--
    body {
    font: georgia;
    background: #FFF;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000;
    font-family: "Forgotten Futurist Shadow";
    background-image: url();
    background-color: #000;
    padding-top: 0px;
    .oneColFixCtrHdr #container {
    width: 1200px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #000000;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    color: #FFF;
    .oneColFixCtrHdr #header {
    padding-top: 5px;
    padding-bottom: 0px;
    color: #FFF;
    background-color: #000;
    position: static;
    text-align: center;
    .oneColFixCtrHdr #header h1 {
    margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 60px;
    color: #F39;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 0px;
    .oneColFixCtrHdr #mainContent {
    padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
    font-family: "SF Foxboro Script";
    color: #FFF;
    font-size: 18px;
    background-color: #000;
    font-weight: bold;
    text-align: center;
    padding-top: 0px;
    .oneColFixCtrHdr #footer {
    padding: 0 10px;
    color: #FCC;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    background-color: #000;
    text-align: center;
    .oneColFixCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    font-size: 10px;
    .navigation {
    background-color: #000;
    text-align: center;
    float: left;
    padding-left: 60px;
    -->
    </style>
    <!-- TemplateEndEditable -->
    <script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="oneColFixCtrHdr">
    <div id="container">
      <div id="header">
        <h1><img src="images/holly-logo-top.jpg" width="875" height="139" /></h1>
        <table width="800" border="0" cellspacing="0" cellpadding="4">
          <tr>
            <td align="right" valign="middle" bgcolor="#FFE8FF" class="navigation"><!-- TemplateBeginEditable name="navieditable" -->
              <ul id="MenuBar1" class="MenuBarHorizontal">
                <li><a href="index.html">MAIN</a></li>
                <li><a href="pone.html" class="MenuBarItemSubmenu">PHOTOS</a>
                  <ul>
                    <li><a href="pone.html">Un</a></li>
                    <li><a href="ptwo.html">Deux</a></li>
                    <li><a href="pthree.html">Trois</a></li>
                    <li><a href="pfour.html">Quatre</a></li>
                  </ul>
                </li>
                <li><a href="me.html">ME</a>            </li>
                <li><a href="connect.html">CONNECT</a></li>
                <li><a href="links.html">LINKS</a></li>
                <li><a href="video.html">VIDEO</a></li>
              </ul>
            <!-- TemplateEndEditable --></td>
          </tr>
        </table>
        <!-- end #header -->
      </div>
      <div id="mainContent"><!-- TemplateBeginEditable name="bodyedit" -->
        <p><img src="images/holly-parker-pink-beauty-web.jpg" width="265" height="349" /></p>
      <!-- TemplateEndEditable -->
      <!-- end #mainContent --></div>
      <div id="footer"><!-- TemplateBeginEditable name="footeredit" -->
        <p>HOLLY PARKER  © 2010 ALL RIGHTS RESERVED  </p>
    <!-- TemplateEndEditable --></div></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
          </script>
    </body>
    </html>

  • My bookmarks bar and toolbar do not drop down when Safari is in full-screen mode.

    I just updated to Safari 5.1.5 this morning as well as OS 10.7.3 and when in full-screen mode, the bookmarks bar as well as the toolbar will not drop down.  Once I escape then I can see them fine.  I'm also having issues with dragging or dropping ANYTHING. A gost image of what I am trying to move shows, and will not go away unless I force quit Mail or Safari. Needless to say, what I ws attempting to drag and drop does not take effect.

    Hi..
    I just updated to Safari 5.1.5 this morning as well as OS 10.7.3 and when in full-screen mode, the bookmarks bar as well as the toolbar will not drop down.
    Click the title bar one time. The gray area of the window at the very top of your screen in full screen mode.
    Not sure what you mean by, "anything", when dragging and dropping. Right or control click the content. There may be an option for saving that data for you from the menu.

  • My Spry Vertical Menu does not "drop-down"

    I've created my Srpy Vertical Menu and does not drop down to the second level, am I missing something?, I must have moved something in the style or something because it does work in a new page but not in the one I'm creating, how can I restart?...
    My page is
    http://www.solucionesinternetgdl.biz/radiadoresenguadalajara/html/Prueba1

    I've created my Srpy Vertical Menu and does not drop down to the second level, am I missing something?, I must have moved something in the style or something because it does work in a new page but not in the one I'm creating, how can I restart?...
    My page is
    http://www.solucionesinternetgdl.biz/radiadoresenguadalajara/html/Prueba1

  • After completing a credit card sale on virtual merchant the option to print does not drop down it did before installing this latest firefox on my new computer

    after completing a credit card sale on virtual merchant the option to print does not drop down as it did before i installed firefox on my new computer . the people at virtual merchant said it might be a pop-up prevention by firefox ...could this be true?

    Can you check this issue on Firefox 9?
    * getfirefox.com

  • My child page does not drop down when i preview

    I am new to muse and i created my website, but the child pages do not drop down when i preview. What am I doing wrong?

    Hi
    I believe you are referring to sub menu items which links to child pages.
    Select menu in design mode and in options please select "All Pages" in menu type. This should resolve the issue.
    Please let me know if you have additional questions.
    Thanks,
    Sanjit

  • SPRY menu not dropping down on certain pages

    I'm having a lot of problems now that I've uploaded this webpage. I created this webpage in Dreamweaver and used the SPRY menu template and everything worked perfectly in Dreamweaver but now that I have uploaded it I can not use the drop downs on like 7 pages. When you are on the shop page, the dinning page, Living, Directions, Design, Events, and the contact page the SPRY menu will not drop down. Could someone look at my site and perhaps my code and tell me what I am doing wrong on those pages?
    http://discoverclearfield.com/shop.html
    http://discoverclearfield.com/dining.html
    there are a couple of the pages that don't work.
    Thanks so much.

    Have a look here and come back after you have fixed the markup http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdiscoverclearfield.com%2Fshop.htm l
    Gramps

  • Horizontal Menu Bar Drop Downs Not Displaying

    I've had this problem before and here I am grappling with it again.  I have a Spry horizontal menu bar with a few drop down menus on it.  The drop downs are not displaying above the other layers on the page.  http://bakerlake50k.com/draft/index.php
    Need help.
    Jeannette

    I get dizzy when I look at your markup. Have a look at the following
    <body class="BakerLake_body_design">
    <div class="BakerLake">
      <!-- (CSSLayouts Begin)  #BakerLake #build_version=1.1.276;pack=;category=;layout=;layoutType=page;scheme=;cssSource=file;ass ets=;halign=center;minwidth=964px;maxwidth=964px;width=964px;bc=;bl=-->
      <div class='cssLO BakerLake_wrapper_layout'>
        <div class='wrapper cssLI BakerLake_wrapper_design'>
          <div class='cssLO BakerLake_row_1_layout'>
            <div class='row_1 cssLI BakerLake_row_1_design'>
              <div class='cssLO BakerLake_row_1_xtdalignwrapper_layout'>
                <div class='row_1_xtdalignwrapper cssLI BakerLake_row_1_xtdalignwrapper_design'>
                  <div class='cssLO BakerLake_row_2_layout'>
                    <div class='row_2 cssLI BakerLake_row_2_design'>
                      <!-- row_2 Content Starts Here -->
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <ul id='MenuBar'>
    and compare that to
    <body>
    <div id="header">
    </div>
    <div id="nav">
    </div>
    The document looks like
    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="header">
    </div>
    <div id="nav">
        The Spry Menubar goes here
    </div>
    <div id="content">
        <div class="article">
      </div>
    </div>
    </body>
    </html>
    and the stylesheet
    /* CSS Document */
    html {
        background: #ccc;
        height: 100%;
    body {
        background: #333;
        width: 1000px;
        margin: auto;
        height: 100%;
    #header {
        background: url(http://bakerlake50k.com/images/bk-header2.gif) no-repeat 30px;
        height: 233px;
    #nav {
        height: 28px;
        background: #000;
        color: #FFCC00;
        width: 900px;
        margin: -30px auto 0 auto;
    #content {
        background: #000;
        padding: 30px;
        margin-top: 15px;
        height: 100%;
    #content .article{
        width: 750px;
        float: left;
        background: #FFF;
        height: 100%;
    If you follow the proposed structure, your SpryMenuBar worries will be a thing of the past
    Gramps

  • In IE website submenus scroll/drop down in Firefox submenu does not scroll down

    In Firefox when I click on a website sub-menu such as credit card info, date, or choose from list no drop down of choices occurs I do not have this problem in IE ..... for example below this box is a question "This happened" with an open box and arrow which presumably gives choices to indicate .....when I click on the arrow nothing happens no text or choices open However I can scroll down through the installed plug in lsit below

    That's a bug. Open an OSS message on BC-WD-UR.
    Armin

  • Horizontal spry menu drop down background issue in Firefox

    Hi, I have used the spry horizontal menu (version0.6) with drop down sub menus in a site that I am building. The menu is working fine in IE but the submenus do not show background colour or images in firefox or Chrome. I have looked on numerous sites for a fix but have had no luck with finding a resolution. Can anyone help? Or shall I start looking for a new menu script?
    Thanks
    Mark

    Add/modify the following style rule adjusting the values to suit
    ul.MenuBarHorizontal a {
        background: red url(home-button.png);

  • Submenu not dropping down

    Hello,
    I am relatively new to dreamweaver and this is my first Spry Menu Bar I have ever created. My problem is that when I look at my pages in FF and IE7, the drop down menu does not display. The links remain hidden. I don't have any flash elements on any of my pages that they could be hiding behind and I have allowed blocked content on both browsers. The submenu will appear occasionally, but then disappear again and will not come back up when I try to hover over the links.
    Link to page: http://www.arenatechnical.com
    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: 900px;
    /* 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
        sz-index: 1000;
        margin: 0px;
        padding: 0px;
    /* 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: 128px;
        float: left;
        background-color: #FFFFFF;
        left: 0;
        top: 0;
    /* 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;
        margin: 0px;
        padding: 0px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin-top: 0px;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 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: 2px solid #45A200;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #ffffff;
        color: #000000;
        text-decoration: none;
        margin: 0px;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #45A200;
        border-right-color: #45A200;
        border-bottom-color: #45A200;
        border-left-color: #45A200;
    /* 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: #45a200;
        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: #45a200;
        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: 85% 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: 85% 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: 85% 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: 85% 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);
        margin: 0px;
        padding: 0px;
    /* 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;

    Wollombi is right.  Start by adding the following to the head of your doc:
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    Then put this at the bottom of your page just before the closing body tag.:
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    If you changed the MenuBar id from MenuBar1, then you will have to change the appropriate reference in the above code too, namely the first argument after new Spry.Widget.MenuBar("XXXXX",
    Hope that helps.

  • Drop down menu problem IE7

    I have a small problem, don't know if you can help at all. I have have upgraded to the latest version of spry and created my spry menu in Dreamweaver CS3. It works great in firefox, but in IE7 the drop down menu jumps up to the top of the browser window, instead of below the menu bar.
    When I check using the browser compatibility function in CS3, I get a message "Expanding Box Problem" with the following lines of code highlighted:
    <ul>
              <li><a href="testimonials extra.html">Extra</a></li>
              <li><a href="testimonials defender.html">Defender II</a></li>
            </ul>
    Here is link to the site, so you can take a look
    http://www.efptproducts.com/
    Any ideas or help would be greatly appreciated ?
    regards,
    Bill

    Hi again,
    Not sure if you need it, but following is the spry css file code:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin
    or padding */
    ul.MenuBarHorizontal
    /* 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;
         height: 33px;
         font-family: Trebuchet, "Trebuchet MS", sans-serif;
         color: #FFFF00;
         font-weight: bold;
    /* Menu item containers, position children relative to this container and
    are a fixed width */
    ul.MenuBarHorizontal li
    /* 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
    /* 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
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    /* Submenus should appear slightly overlapping to the right (95%) and up
    (-5%) */
    ul.MenuBarHorizontal ul ul
    /* 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
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    /* Menu items that have mouse over or focus have a blue background and white
    text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    /* Menu items that are open with submenus are set to MenuBarItemHover with a
    blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
    a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
         background-color: #33C;
         color: #333333;
         font-family: Trebuchet, "Trebuchet MS", sans-serif;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation
    MenuBarItemSubmenu and are set to use a background image positioned on the
    far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
         background-image: url(../images/MB%20Dark%20Thin.jpg);
         background-repeat: repeat-x;
         background-position: 95% 50%;
         font-family: Trebuchet, "Trebuchet MS", sans-serif;
         font-size: 14px;
         font-style: normal;
         font-weight: bold;
         color: #FFFF00;
    /* 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(../images/MB%20Light%20Thin.jpg);
         background-repeat: repeat-x;
         background-position: 95% 50%;
         font-family: Trebuchet, "Trebuchet MS", sans-serif;
         font-size: 14px;
         font-style: normal;
         font-weight: bold;
         color: #000000;
         width: 120px;
    /* Menu items that are open with submenus have the class designation
    MenuBarItemSubmenuHover and are set to use a "hover" background image
    positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
         background-image: url(../images/MB%20Light%20Thin.jpg);
         background-repeat: repeat-x;
         background-position: 95% 50%;
         font-family: Trebuchet, "Trebuchet MS", sans-serif;
         font-size: 14px;
         font-style: normal;
         font-weight: bold;
         color: #000000;
    /* 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(../images/MB%20Light%20Thin.jpg);
         background-repeat: no-repeat;
         background-position: 95% 50%;
         font-family: Trebuchet, "Trebuchet MS", sans-serif;
         font-size: 14px;
         font-style: normal;
         font-weight: bold;
         color: #000000;
    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
    /* 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;
         font-family: Trebuchet, "Trebuchet MS", sans-serif;

  • Apple menu does not drop down

    When I click on the Apple icon the menu does not appear and drop down. I have restarted the computer and I don't know how to fix this or what it means.

    Run troubleshooting. You can see the troubleshooting steps here, here and here.
    Usually a Safe boot and/or booting into Single User mode to run fsck fixes the glitches on my PB G4.

Maybe you are looking for

  • Cannot Read Files off CD/DVD Drive

    I realize there are several similarly titled posts on this topic, but I have not found the problem I have.  Computer: Pavilion tx2000CTO.  O/S:  Vista Home Premium (all updates current).  Issue:  Some CD's and DVD's cannot be read completely.  I CAN

  • Barcode printing in simple abap report

    Hai, I want to print Barcode for 'RESERVATION' in my simple abap report.Can you please give step by step procedure to achieve this? Thank you. Note :I saw many threads in sdn,it is NOT clear for me. With Regards, Jaheer.

  • CS6 subscription error on Mac

    Hi, I have only just downloaded CS6 creative cloud last night and everything went well on my PC but on my Mac it keeps telling me i have already used my license 2 times which is impossible because i haven't even activated it on my Mac yet, the live c

  • Sharepoint provider hosted app using angularjs

    I am working on a provider hosted app and trying to access the list item through REST call using angularjs. But I am not able to access the list. Is it possible to access the sharepoint list through REST call using angularjs in a provider hosted app?

  • PLEASE HELP-HOW DOES A LOADED IPOD GET INTRODUCED TO A DIFFERENT COMPUTER

    without losing the music on it? What has to happen, how, and when does it have to happen. I sold my IPOD and the new owner does not want to lose any of the music. People have written in that it can be done and it cant be done? please help. Jeff