Skip navigation
commander1337
Currently Being Moderated

Spry Submenus Dont Open?

Nov 21, 2012 10:08 AM

Tags: #spry

Hi I'm working on a new website for my company and I can't get these dang spry menus to drop down heres the link http://www.daigleharp.com/index2.html

if you need the code I can post that too. Please help! :]

 
Replies
  • Currently Being Moderated
    Nov 21, 2012 10:37 AM   in reply to commander1337

    Remove <div align="middle"> from line 1 of your code.  It is causing your page to render in Quirks Mode.

     

    Code valiation errors:

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.daiglehar p.com%2Findex2.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 11:15 AM   in reply to commander1337
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 11:49 AM   in reply to commander1337
    1. Open your SpryMenuBarHorizontal.css file.
    2. Delete what you have now and replace it with the original widget code below.
    3. Save.

     

    @charset "UTF-8";
    
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    /*******************************************************************************
    
     LAYOUT INFORMATION: describes box model, positioning, z-order
    
     *******************************************************************************/
    
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
        z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 8em;
        float: left;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        left: -1000em;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
        left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
        width: 8.2em;
    }
    /* 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: #EEE;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
        background-color: #33C;
        color: #FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
        background-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(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;
        }
    }
    

     

    Before you make sweeping changes to your Spry Menu styles, read the following articles:

     

    Spry Menus 10 Commandments

    http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php

     

    Fixing Spry Menus 1.6.1

    http://www.projectseven.com/testing/adobe-bugs/spry-menus/

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points