Skip navigation
Currently Being Moderated

Drop-down menu in Dreamweaver CS5.5 not displaying

Jul 18, 2012 4:55 PM

Thanks for anyone's help.  I'm a first time user of the forum so please excuse any protocol errors.

 

I can't get my drop-down menu to display on my web page (http://www.cglcontracting.com/) on a Windows platform using Dreamweaver CS5.5.

 

Thanks very much for any advice/help.

 
Replies
  • Currently Being Moderated
    Jul 18, 2012 6:03 PM   in reply to dixey-rose

    Unrelated, but this link is pointing to your local computer:

     

    <script src="file:///C|/Users/Arne/Documents/Programming/CGL/upload files/Scripts/swfobject_modified.js" type="text/javascript"></script>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 10:23 AM   in reply to dixey-rose

    Hi -

     

    Sorry, not an expert, but I think the cascade is getting stopped somewhere.

    Just for giggles, remove the empty lines between the z-indexand the filter, save and upload and let's see if that's the problem

     

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

    ul.MenuBarHorizontal iframe

    {

    z-index: 1010;

     

     

     

     

     

    filter:alpha(opacity:0.1);

    position: relative;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 12:25 PM   in reply to dixey-rose

    Hi again -

     

    My previous suggestion did not seem to make any difference, the CSS still did not validate.

    I seems to be choking on your Browser Hack section.

     

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cglc ontracting.com%2FSpryAssets%2FSpryMenuBarHorizontal.css&profile=css3&u sermedium=all&warning=1&vextwarning=&lang=en

     

    I re-wrote the bottom Browser Hack section and it now validates.

     

    I'll paste the whole CSS file here, Save it as "SpryMenuBarHorizontal.css" and give it a try.

     

    @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: 90%;

        cursor: default;

        width: auto;

        color: rgb(153,153,153);

        text-transform: uppercase;

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        text-align: center;

        background-color: rgb(255,255,255);

        vertical-align: middle;

    }

    /* 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

    {

        color: rgb(153,153,153);

        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;

        color: rgb(0,255,0);

        overflow: hidden;

        visibility: inherit;

    }

    /* 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

    {

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        z-index: 1020;

        cursor: default;

        width: 8.2em;

        color: rgb(204,204,204);

        top: 0px;

        overflow: auto;

        visibility: inherit;

        margin-top: -5%;

        margin-left: 95%;

    }

    /* 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

    {

        color: rgb(204,204,204);

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-variant: small-caps;

        text-transform: uppercase;

        background-color: rgb(255,0,0);

        left: auto;

        width: auto;

        z-index: auto;

        visibility: inherit;

    }

    /* Menu item containers are same fixed width as parent */

    ul.MenuBarHorizontal ul li

    {

        text-align: left;

     

    }

    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

    ul.MenuBarHorizontal ul ul

    {

        background-color: rgb(204,204,204);

        margin-top: -5%;

        margin-right: 0;

        margin-bottom: 0;

        margin-left: 95%;

    }

    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

    {

        left: 100px;

        background-color: rgb(204,204,204);

    }

     

    /********************************************************************* **********

     

    DESIGN INFORMATION: describes color scheme, borders, fonts

     

    ********************************************************************* **********/

     

    /* Submenu containers have borders on all sides */

    ul.MenuBarHorizontal ul

    {

        border: 0px none #CCC;

        margin-top: 0%;

        margin-right: 0%;

        margin-bottom: 0%;

        margin-left: 0%;

    }

    /* Menu items are a light gray block with padding and no text decoration */

    ul.MenuBarHorizontal a

    {

        display: block;

        cursor: pointer;

        background-color: #F00;

        color: #003;

        text-decoration: none;

        text-align: center;

        font-family: Arial, Helvetica, sans-serif;

        padding-top: 1.2ex;

        font-weight: bold;

        vertical-align: middle;

        padding-bottom: 0.53em;

    }

    /* 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: #000;

        color: rgb(255,255,255);

        text-align: center;

    }

    /* 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: #900;

        color: #066;

        text-align: center;

        vertical-align: middle;

    }

     

    /********************************************************************* **********

     

    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: 98% 50%;

        background-color: rgb(255,0,0);

        color: rgb(0,0,51);

    }

    /* 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: 98% 50%;

        background-color: rgb(204,204,204);

        visibility: inherit;

    }

    /* 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: 98% 50%;

        background-color: rgb(153,0,0);

        visibility: visible;

    }

    /* 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: 98% 50%;

        background-color: rgb(153,153,153);

    }

     

     

    /********************************************************************* **********

     

    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.MenuBarVertical iframe

    {

        position: absolute;

        z-index: 1010;

    }

    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

    @media screen, projection

    {

        ul.MenuBarVertical li.MenuBarItemIE

        {

            display: inline;

            f\loat: left;

            background: #FFF;

        }

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 4:00 PM   in reply to dixey-rose

    Hi -

     

    Well, for a newbie, you certainly put a great design together.

    Good news, you don't need to change anything in your pages;

    We're just swapping a current file with a revised version.

     

    If you look in your source code, you will see this tag in the head section :

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

     

    This tells you that your page menu needs to use a separate CSS file named SpryMenuBarHorizontal.css

    which can be found in a folder named  SpryAssets.  This file controls the styling of your menu.

     

    This is the file I revised and posted above. While it is a text file, it must be named SpryMenuBarHorizontal.css as I posted, with careful attention to matching the capitalization exactly.

     

    First, go to the SpryAssets folder (in your local site root folder) and find the current SpryMenuBarHorizontal.css file

    and rename it to OLDSpryMenuBarHorizontal.css (in case you wish to go back to the original)

     

    Second, copy or move the file I sent you into the SpryAssets folder.

     

    Third, upload the revised SpryMenuBarHorizontal.css file to the SpryAssets folder on your remote site.

     

    Then let's see if your menu works.  If you wish to talk about it and you are in the US, you may call me at 914-941-3616

     

    Good luck

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 7:04 PM   in reply to dixey-rose

    Well at least the CSS now validates! I am out of petrol on this one. 

     

    It might be time to try Version 2.0 (you are on Spry Pre-Release 1.6.1)

     

    Let's chant for an expert to step in here *HINT*

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 8:18 PM   in reply to dixey-rose

    Your SpryMenuBarHorizontal.css file has been mangled to death. It is no longer of any use.

     

    The best way is to resurrect the original SpryMenuBarHorizontal.css and make the following additions to the very bottom of the file.

     

    ul.MenuBarHorizontal {
        font-size: 90%;
    }
    ul.MenuBarHorizontal li {
        width: auto;
    }
    ul.MenuBarHorizontal ul {
        width: auto;
    }
    ul.MenuBarHorizontal ul li {
        display: block;
        float: none !important;
        width: auto;
        white-space: nowrap;
        border-bottom: solid 1px #EEE;
    }
    ul.MenuBarHorizontal a {
        background-color: #ff0000;
        color: #003;
        padding: 0.5em 1.75em;
        text-transform: uppercase;
    }
    ul.MenuBarHorizontal a.MenuBarItemSubmenu {
        padding: 0.5em 2em 0.5em 1.75em;
    }
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
        background-color: #900;
        color: #066;
    }
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
        background-color: #900;
        color: #066;
    }
    

     

    The best way to get a new copy of the original CSS is to

    1. go to the SpryAssets folder and delete SpryMenuBarHorizontal.css
    2. create a temporary document named junk.html or similar
    3. in junk.html place a Spry horizontal menu bar and follw the instructions
    4. delete junk.html

     

    Once you have done that, open SpryMenuBarHorizontal.css and copy and paste the above mentioned style rules at the very bottom of the file. This will ensure that the defaults will be overridden.

     

    There is still a couple of little nasties to get rid of.

    1. delete line 43 of your document, that says text-align: right;
    2. delete lines 266-283 that say

    a:hover {

        text-decoration: none;

        background-color: rgb(153,0,0);

        border-top-style: none;

        border-right-style: none;

        border-bottom-style: none;

        border-left-style: none;

        height: 33px;

    }

    a:active {

        background-color: rgb(255,51,0);

        border-top-width: thick;

        border-bottom-width: thick;

        border-top-style: solid;

        border-bottom-style: solid;

        border-top-color: rgb(255,0,0);

        border-bottom-color: rgb(255,0,0);

    }

    Follow the above and you are done.

     

    It may be worthwhile having a look at http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 4:46 AM   in reply to dixey-rose

    It was a pleasure trying to help you, and I am always grateful when Ben steps in.

     

    Sad to say, I still can't see the dropdown in Firefox 8.0.1

    CGL.jpg

    Ben, could this be any help?

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cglc ontracting.com%2FSpryAssets%2FSpryMenuBarHorizontal.css&profile=css3&u sermedium=all&warning=1&vextwarning=&lang=en

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 6:42 AM   in reply to Ken Binney

    @Ken

     

    You are right Ken, the dropdown does not work in FF. The reason can be found on line #241 of the main document which reads

    overflow: hidden;

    I overlooked this when I posted my previous answer. To rectify the problem, simply remove this line.

     

    Ben

    a.k.a Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 8:50 AM   in reply to dixey-rose

    is any way to match the size of the highlight colour to that of the original menu size

    You have got a stray style rule on line #202 of SpryMenuBarHorizontal (padding-bottom: 1em;). Under no condition should that be there. If you want to increase the height of the menu bar, please let me know and I will come up with a fix.

    as well as the width of the drop-down menu

    Sorry, could you elaborate on this, I am not sure what it is that you want changed.

    can the white border of the drop-down menu be removed?

    Remove line #86 (border: 1px solid #CCC;) of SpryMenuBarHorizontal.css

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 9:48 AM   in reply to Ben Pleysier

    @Ben  BIG thanks for bailing us out

     

    You do know that we see you differently than you like to present yourself.

    BenAngel.gif

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 20, 2012 6:24 PM   in reply to Ken Binney

    @ Ken

     

    I love your interpretation, Lucifer in camouflage!

     

    Ben

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 3:57 PM   in reply to dixey-rose

    I don't know how much I can help, but it seems like its working itself out. There is a useful tool to help create CSS menus for Dreamweaver.

     

    http://cssmenumaker.com/dreamweaver-css-menu-extension

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 5, 2012 6:17 PM   in reply to dixey-rose

    I think the following addresses can simplify our work:

    http://cssmenumaker.com/dreamweaver-css-menu-extension

    have a lot of ease in the offer and just copy and paste it

     
    |
    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