Spry Dropdown Menu properties hidden

I am trying to create a spry dropdown menu but cannot see the light blue menu thing that you click on to edit the spry menu, and so therefore cannot edit it. It should pop up when you hover over the spry menu in design view but I get nothing. Please help

See if this works:
Place your cursor inside on of the menu items, look at the tag above the Property Inspector and you'll see the <ul.MenuBarHorizontal#MenuBar1> tag.
(if it's a vertical menu, it'll say vertical instead of horizontal :-)
Click on the tag  - does the editing box for the menu then show up?

Similar Messages

  • IE 7 - CSS Issues with Spry dropdown Menu *HELP*

    I am using a spry horizontal dropdown menu generated in DW. The menus look consistant in all other browsers except ie7 -  When the drop down menu occurs they all appear to the right and not directly under its menu item.. Looked around in the Css and i cant seem to find the right rule to make the change in ie7 only... was planning on using a css conditional statement to shift them left.. But im not having any luck.. HELP!
    Thanks so much in advance!

    Sorry.. Here is the link.. Thanks so much for your willingness to help!
    http://soldesign.us/_working/WEBSITE_BoulderPlasticSurgery/index.html

  • Spry Dropdown Menu problem in Mobile Safari (iPad)

    I've used the stack SpryMenuBar.js in Dreamweaver to create a dropdown menu for a client (XponentMD.com).
    When I Did a pass to optimize the site for the iPad, I found that the menu does not work properly. When you touch the top-level category, you go directly to the linked page and don't trigger the dropdown categories. I believe is it because the touch screen interface does not recognize focus and blur events.
    It there and updated version of the SpryMenuBar.js that accommodates touch screen browsers like mobile Safari?

    Thanks for your answers.
    Looks like the browser on iPad simulator doesn't behave like the real touch device, because on iPad itself definitely all unmodified Spry 2.0 menus and also that example ( http://nwneighborhoodvet.com/ ) don't work properly. When I touch "About Us" on http://nwneighborhoodvet.com/, then it immediately loads http://nwneighborhoodvet.com/pages/about-us.html instead of displaying the drop down menu.
    Somehow I also don't understand your versioning scheme. I downloaded today again the so called Spry 2.0 Dropdown Menu with the Widget Browser and when I install it on my site the directory with the CSS and Javascripts inside is called Spry-UI-1.7. When this is supposed to be Spry 2.0, why don't you call it Spry-UI-2.7 or 2.0.7 or something similar? Or do I get the wrong version from that strange Widget Browser/Dreamweaver CS5?
    My test page (should be unmodified and it's not formatted properly at the moment) is http://www.safeexambrowser.org/Templates/main-D.dwt, also doesn't work properly on iPad.
    This is a example (jQuery Superfish) which is actually working on iPad: http://users.tpg.com.au/j_birch/plugins/superfish/#examples (see the menu below "The result:".

  • Spry dropdown menu problem

    I've been working on a drop down menu for a site for a few
    months now. I'm using the Spry Widget. I can't seem to get it
    working right. I had used the drop down menu feature without
    problems in CS2, but now that I have CS3, I'm having problems. I
    use a Mac and am checking the site on a PC. The problem is in IE on
    the PC.
    Here is the site and page with the problem:
    http://www.nectfarmersmarket.org/farms.html
    The menu item "Participating Farms" has a drop down menu.
    Everything works fine on my Mac using FF and Safari. On the PC,
    using IE, only some of the links to the page anchors work in the
    drop down menu. The ones that don't work for me are: Duhamel Farm,
    Palazzi, Stone Farm, and Woodstock Farm.
    Since I assume it's user error :), today I recreated the page
    and the dropdown menu again from scratch:
    http://www.nectfarmersmarket.org/farmsC.html.
    And now more links don't work. These are the ones that don't work
    on this test page: Duhamel, Palazzi, Rachels, Stone and Woodstock.
    I have posted about this a while back, but I still can't
    figure it out and my client is getting a little impatient.
    TIA!

    In regards to the validation if you put that page through
    right now you will get a few errors. I will try to give them a
    quick rundown.
    - HR tags should look like <hr /> instead of <hr>
    which you have now. This is because there is no ending tag with HR
    tags so XHTML puts an end in the tag <hr />.
    -One error is a missing v in a closing div tag. You have
    </di> instead of </div>.
    -The final is with table tags, but with a quick glance I
    can't tell which tags are duplicate. Basically it appears as though
    there are one too many sets of closing tags. Would have to look
    closer at this to solve.
    In regards to the Drop-Down and anchors you may want to post
    this over at the Adobe Spry Forums because this is an odd issue and
    may be something that we have overlooked. So head over and post the
    link to the page so that they can see on that forum:
    http://www.adobe.com/go/labs_spry_pr1_forum
    Outside of that I really don't know what to say without
    rebuilding the menu from scratch and building a page locally on my
    test server which I won't really have time to do until probably the
    weekend and I know you want this solved as soon as possible. Wish
    there was more I could tell you but this has me stumped.

  • Spry dropdown menu only works fully in Safari...

    http://www.charlespatrickjewelers.com/jewelry_pages/rings.html
    That is the link to my page. I have spry dropdowns set on the navbar for Rings, Bracelets, and watches.
    In IE and Firefox, only the rings dropdown is working, but for Safari every dropdown works. Can someone help me fix this?
    Thank you all!
    Aza

    Well, someone on another forum suggested I use css rollovers because both the spry and the swap image used the mouseover event, but I changed it and that didn't work. Can anyone here tell me why my spry navbar doesn't work in ie and Firefox?

  • 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>

  • SPRY dropdown menu dont appear in IE

    I know its been asked to death but can someone give me a hint how to solve this. Have tried everything posted, updated to new spry 1.6 etc.
    It jsut shows a white frame with the message: false, whr the menu is supposed to be.
    www.dykningithailand.com/dansk/dykning-thailand.html
    here is my 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 */
    body {
    background-color:#4286C8;
    padding:0;
    margin:0;
    text-align:center;
    #wrapper {
    margin: 0px auto;
    padding: 0;
    background-color:#000000;
    width: 1000px;
    text-align:left;
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 1000px;
    background-color: #4286C8;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    z-index: 1020;
    cursor: pointer;
    width: 142px;
    float: left;
    background-color: #4286C8;
    /* 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
    top: 0
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 142px;
    position: absolute;
    left: -1000em;
    background-color: #4286C8;
    /* 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;
    top: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 142px;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #3170BF;
    color: #FFFFFF;
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    font-weight: normal;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    letter-spacing: 0.1em;
    padding-left: 3px;
    /* 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: #036;
    color: #FFF;
    font-weight: normal;
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-size: 10px;
    /* 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: #036;
    color: #FFF;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    text-decoration: none;
    font-size: 10px;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

    You have changed this style:
    /* 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;
    If you change left back to 0, it should work again. Notice that the comment states "we set left to 0 so it comes onto the screen".
    Beth

  • Background image in Spry dropdown menu

    Hey everyone,
    I am at my wits end. I am converting an old table-based page to a css standards-compliant page and need to use a spry drop-down menu but can't get a background image to show up in the menu. If the top-most level has no submenu, then the background image shows up fine. But if I have a submenu, then no background image will display. I have put a background image in every place I can think of in the css for the menu, but it won't show up. I have googled for a solution, read the documentation on the spry menus, as well as searched through the Dreamweaver forum to no avail.
    Does anyone know how to do this? If it is not possible, can someone let me know that?
    Here is the page: http://www.sportplanesflorida.com/index_css.php (notice how the "Learn to Fly" tab has no background image).
    Thanks for your help.
    Mike

    remove the background-position:95% 50%; from your css.
    ul.MenuBarHorizontal a.MenuBarItemSubmenu {
         background-position:95% 50%;
         background-repeat:no-repeat;

  • Spry dropdown z-index problems in IE

    Hello
    I'm having some trouble with the spry horizontal dropdown in
    IE, and it's interaction with SmoothGallery. In every browser (with
    the exception on IE 6&7 of course) the higher z-index values of
    the menu cause it to overlay the JS image gallery below it. In IE
    however it does not.
    http://www.digitalrift.co.uk/projects/woods/
    Works fine on every browser tested so I can't see how it'd be
    a fault with the z-index values used. Anyone have a suggestion as
    to a workaround for good ol' IE?
    Thanks

    All right, well I just figured out my problem, and hopefully this will help anybody else. 
    I was positioning my images using <position: absolute;>  While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it. 
    The solution I found was changing the position attribute to "static" rather than "absolute".  The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place. 
    While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

  • Spry dropdown menus in Dreamweaver (CS 5.5) - how to make them smooth?

    Hello.  I received CS5.5 Master Collection this week and installed it.
    I am trying to add a Spry dropdown menu bar.
    That's easy enough, but I'm surprised that the menus just *pop* -- there's no smooth scrolling.
    Is there an easy way, using JavaScript or other means, to make these menus incorporate a smooth scroll-down effect?
    Thx!

    See Spry Transition effects.
    http://labs.adobe.com/technologies/spry/samples/effects/transition_sample.html
    Or look at jQuery Superfish with optional HoverIntent.js.
    http://users.tpg.com.au/j_birch/plugins/superfish/#examples
    Nancy O.
    web : print : graphics : media
    http://alt-web.com

  • Dropdown Menu bar being hidden by the Textarea

    My problem is that the menu bar does show up, but the text area is over the dropdown menu. You can see the drop down menu start but then is hidden under the textarea. I hope that a good enough discription.
    The frame is a typical JFrame that contains a BorderLayout. My class TheFrame is an extention of JFrame. In the CenterPanel I have a Text area. In the south panel I have another BorderLayout with a text area as the center and a button for the east panel. The menu is going under the text area in the center panel. This might be a bug with the borderlayout?
    public TheFrame(){
    super("Com");
    getContentPane().setLayout(new BorderLayout());
    JMenuBar menuBar = new JMenuBar();
    setJMenuBar(menuBar);
    menuBar.add(getMyMenuBar());
    getContentPane().add(getCenterPanel(), BorderLayout.CENTER);
    getContentPane().add(getSouthPanel(), BorderLayout.SOUTH);
    pack();
    private JMenu getMyMenuBar(){
    JMenu menu = new JMenu("File");
    menu.add(createConnectItem());
    menu.add(new JMenuItem("test"));
    return menu;
    private JMenuItem createConnectItem(){
    JMenuItem connect = new JMenuItem("New");
    ActionListener listener = new ConnectMenuItemActionListener(com);
    connect.addActionListener(listener);
    return connect;
    }

    I don't see the textarea in the code you posted.
    But I know that the described problem comes up when
    you use "TextArea" unstead of "JTextArea".
    "TextArea" is an awt component and "JTextArea" is
    the corresponding swing component. You should not
    mix awt and swing components in the same GUI.
    However, "TextArea" has the scrolling facility already included.
    With "JTextArea" you must use JScrollPane if you need
    scrolling.
            JScrollPane scrollpane = new JScrollPane();
            JTextArea textarea = new JTextArea();
            scrollpane.setViewportView(textarea);

  • Spry Menu Panel Hidden by another element on page.

    imagesandwords.org.uk/Don/index03.php
    That's my page.
    The drop-down menu gets hidden by the footer region.
    Refresh the page because some of the bigger random images push the footer low enough for the menu to display.
    Any idea how I can stop that happening?
    Thanks
    Martin

    Hi Martin,
    The problem is happening because your wrapper div's property are set as following:
    #wrapper {
        width: 900px;
        margin: 0 auto;
        overflow:hidden;
    Because overflow is hidden the amount by which page need to scroll for a long sub menu is also hidden.
    If you set it as following:
    #wrapper {
        width: 900px;
        margin: 0 auto;
        overflow:auto;
    Then your menu will be visible but an unwanted scroll will come up.
    Either you have to think of a better position for this menu (or change the design) so that it is able to take its height:
    Position your menu at the top inside the white region as following and see if you like it that way.
    #navigation {
        width: 180px;
        float: left;
        padding: 0px 0 180px 0;
    Regards,
    Vinay

  • Please Help! There has to be a quick .js fix for Spry dropdown to work for iPads...

    I know I can upgrade, download, purchase or any combination of these to get and use a new dropdown menu format that would work, but that is not what I want to work on learning today.  Our top coder/developer is out of town right now, and I am just trying to fix a menu bar that was done in CS4 with Spry 1.6.1, and I have to believe that someone out there knows the fix to get it to work on an ipad.  I can make the parent li not a link and it still does not work.  Here is my .JS code:
    // 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];

    Try the following changes to the JS file
    Lines 103 and 104 change the values
    this.showDelay = 100; // was 250
    this.hideDelay = 200; // was 600
    Comment out line 286
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    //    return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    Comment out line 366 and add new lines 366 and 367
    var self = this;
    this.addEventListener(listitem, 'click', function(e){self.Click(listitem, e);}, false);
    this.addEventListener(listitem, 'click', function(e){self.mouseOver(listitem, e);}, false);
    //   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);
    I have not tested the above changes ontouch screens; they do seem to work Ok on desktops.
    NOTE: Line numbers could be different because of the difference in our versions.

  • How do I make the menu title a different color when it is the active menu in Spry horizontal menu?

    How do I make the menu title a different color when it is the active menu in Spry horizontal menu?
    Dreamweaver CS5.5
    Apple OS X.6.8
    View site at: http://dorsay-easton-indian-law.com/staging/index.html
    Steps:
    1. Click link to land on Home page
    2. View Home link in Spry horizontal navigation menu
    Actual:
    Home menu title is the same color as all of the others.
    Expected:
    The title of the active menu is       color: #FFC.
    I was hoping that a:active would give me this functionality, but that's not how it is described. Any suggestions are welcome!

    Nothing I have tried in the template makes the BODY tag editable. That's why I'm wondering how to disconnect the template from the individual pages. Adding an ID to each body tag is a prerequisite of the how-to page you supplied.
    You don't make the <body> tag editable in a Template.
    You make attributes of the <body> tag editable.
    Don't disconnect the Template from the child pages.
    Specify editable tag attributes in a template
    http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7aa3a.h tml
    In the Template:
    Select the <body> tag (either in the Tag selector or click inside the <body> tag in Code View)
    Modify > Templates > Make Attribute Editable
    Select ID from the Attribute dropdown menu
    If there's no existing ID attribute then click Add and type ID into the next dialogue box
    Attribute: ID
    Check the box to "Make attribute editable"
    Enter anything into the Label field as a default e.g. foo
    OK
    Dreamweaver will change the <body> tag to read <body id="@@(foo)@@"....
    Now the ID is editable
    Save the Template and update the child page
    In each child page:
    Modify > Template Properties
    Select the id attribute from the list (it's probably the only one listed)
    Change its name in the box to whatever name matches your CSS rule for the active state for that page
    OK
    Save
    Upload

  • Dropdown Menu CSS Style

    Hi!
    I am trying to create a dropdown menu in Dreamweaver. I have watched several tutorials and read many how-to guides and my html looks fine, but editing the style is really throwing me off. I am a beginner to Dreamweaver, so I am unsure of the properties I need to make this right.  The code below, when I hover over the first button the dropdown menu goes behind the other two buttons.  I need the dropmenu to go off to the side of the buttons and down.  If not that, I can align the buttons to go horizontal, so they aren't being covered. I hope that makes sense.
    Thank you in advance!! 
    -M
    HTML
      <div class="dropdown" id="dropdown" style="text-align: left;">
    <ul>
            <li><a href="#">Americas</a>
               <ul>
                       <li><a href="#">Connecticut</a></li>
                        <li><a href="#">Ohio</a></li>
                        <li><a href="#">Vermont</a></li>
                        <li><a href="#">California</a></li>
                        <li><a href="#">Canada</a></li>
                        <li><a href="#">Brazil</a></li>
               </ul>
            </li>
    </ul>
      <ul>
           <li><a href="#">China</a>
                 <ul>
                         <li><a href="#">China</a></li>
                   </ul>
            </li>
    </ul>
    <ul>
            <li><a href="#">Europe</a>
                <ul>
                   <li><a href="#">France</a></li>
                   <li><a href="#">UK</a></li>
                </ul>
            </li>
    </ul>
    </div>
    STYLE
    #dropdown {
    margin: 0;
    width: 150px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    #dropdown ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    #dropdown li {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
        position:relative;
    #dropdown ul li a {
    text-align: center;
    height: 30px;
    width: 150px;
    display: block;
    color: #000;
    text-decoration: none;
    border: 1px solid #000;
    text-shadow: 1px 1px 1px #000;
    background: #CCC;
    #dropdown ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
      #dropdown ul li:hover ul {
    visibility:visible;
    position:absolute;
       #dropdown li:hover {
    background: #7D92C6;
    float: left;
        #dropdown ul li:hover ul li a:hover {
        color:#000;
        background:#7D92C6;
      #dropdown a:hover {  
      color:#000;
      background: #7D92C6;
    .clearFloat {
        clear:both;
        margin:0;
        padding:0;

    Are you doing this as an execise in learning or is it for a real website. I ask because if the latter why not just use a tested and proven commercial product and be done with it?  I have used the PVII (http://www.projectseven.com) products for years and can't recommend them highly enough.

Maybe you are looking for

  • How to create a table with these dimensions?

    Still new to Indesign but I need to create a table like the one below. Selecting the text tool, I created a text frame and then inserted a table. However, I am lost as to how to edit the top row to be the length of the bottom two columns. I looked at

  • HP Laserjet Pro M1217nfw, support for ePrint Home&Biz on Android devices

    Got my new LaserJet Pro M1217nfw installed on my home (secure)wireless network and am printing wirelessly from 3 windows laptops. Started trying to get my smartphones to connect and print to it. Droid X Verizon, running gingerbread latest Verizon upd

  • Lightdm power options with systemd?

    I gave up LXDM because it had a lot of bugs. LightDM seems to be ok - everything works except power button - nothing option is displayed. https://aur.archlinux.org/packages/lightdm-devel/  the source of this package include "lightdm-1.5.1-systemd_log

  • Problem in Hierarchy in BEX Query

    Hi ALL, I have created Query for balance statements & Profit ,Loss statement by using hierarchy. It  is execuiting in perfectly.But the problem is "I want in the query output hierarchy with only 1 node that is Profit/loss node." I have done restricti

  • FI or CO

    I have done MBA in finance and IT. so i want to make my carrier in both aspects. So i realise that SAP is the best option for that. I want join ATOS for SAP training. But I have a doubt which is the best option for me that CO certification or FI cert