23 Replies Latest reply: Oct 5, 2012 6:17 PM by ariej RSS

    Drop-down menu in Dreamweaver CS5.5 not displaying

    dixey-rose Community Member

      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.

        • 1. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
          Ken Binney CommunityMVP

          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>

          • 2. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
            dixey-rose Community Member

            Thanks for your input Ken.  I deleted that code with no affect (pos./neg.).  I appreciate your time/help.  If you have any suggestions about how I can get the drop-down menu to work I would be grateful.  Thanks again.

            • 3. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
              Ken Binney CommunityMVP

              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;

              }

              • 4. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                Ken Binney CommunityMVP

                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.cglcontracting.com%2FSpr yAssets%2FSpryMenuBarHorizontal.css&profile=css3&usermedium=all&warning=1&vextwarning=&lan g=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;

                    }

                }

                • 5. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                  dixey-rose Community Member

                  Hi Ken,

                  Thanks for your time/help.  Unfortunately I'm very new to this so I'm unsure as to where to save the file and then how to implement it in my web pages.  I've saved it as a text only file, but not sure what to do with it?  Sorry for the lack of knowledge.

                  • 6. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                    Ken Binney CommunityMVP

                    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

                    • 7. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                      dixey-rose Community Member

                      Hi again Ken,

                      Thanks for the explanation.  I suspected it was something like that, but didn't want to make any changes without being certain...

                       

                      I've uploaded the new file that you sent me, but nothing seems to have changed.

                       

                      I really appreciate your help,

                      • 8. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                        Ken Binney CommunityMVP

                        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*

                        • 9. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                          Ben Pleysier CommunityMVP

                          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

                          • 10. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                            dixey-rose Community Member

                            Thanks for your efforts Ken.  I'll try to follow Gramps' suggestions and see how it goes.

                             

                            Sure appreciate your help though.

                            • 11. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                              dixey-rose Community Member

                              Hi Gramps,

                              Thanks very much for your time and suggestions.  I'll try to follow your instructions and let you know how I make out.

                               

                              Thanks again,

                              • 12. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                dixey-rose Community Member

                                Hi Gramps,

                                It works!  Thanks so very much for your time and help.  I hope the satisfaction of helping equals the appreciation for the help.

                                 

                                I can't thank you enough, and I hope you don't mind if I call for your help again,

                                 

                                Dixey-Rose

                                • 13. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                  Ken Binney CommunityMVP

                                  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.cglcontracting.com%2FSpr yAssets%2FSpryMenuBarHorizontal.css&profile=css3&usermedium=all&warning=1&vextwarning=&lan g=en

                                  • 14. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                    Ben Pleysier CommunityMVP

                                    @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

                                    • 15. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                      dixey-rose Community Member

                                      Thanks for pointing that out Ken.  I didn't have a chance to check the other browsers...much appreciated.

                                      • 16. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                        dixey-rose Community Member

                                        Thanks again Gramps.  I got it sorted out (for all the browsers) but I am wondering if there is any way to match the size of the highlight colour to that of the original menu size as well as the width of the drop-down menu.  Also, can the white border of the drop-down menu be removed?  I did try (for some time) to go through Dreamweaver's 'properties' menu to change these, but I can't find them (and don't want to mess up what you've already helped me fix!).

                                        • 17. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                          Ben Pleysier CommunityMVP

                                          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

                                          • 18. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                            Ken Binney CommunityMVP

                                            @Ben  BIG thanks for bailing us out

                                             

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

                                            BenAngel.gif

                                            • 19. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                              dixey-rose Community Member

                                              Hi again Gramps,

                                              Thanks for the line #202 correction.  I actually looked at that last night and wondered about it...but my lack of knowledge/ability is obviously glaringly obvious as I don't know what impact it has.

                                               

                                              Sorry for the vagueness of my request.  When the mouse goes over the primary menu items the highlight colour is a few pixels 'shorter' than the original menu item so there is a thin bar of the original primary menu item showing.

                                               

                                              Also, the drop-down menu is wider than the primary menu item under which it is displayed.  Is there any way to match the width of the submenu to it's 'parent' as well as align the top of the drop-down menu to the bottom of the primary item above it?

                                               

                                              And finally, the drop-down menu items each have a white (single pixel) border around each of them.  Can that be removed?

                                               

                                              I sure appreciate your help AND patience.  I'm learning, but slowly!

                                               

                                              Thanks again,

                                              Dixey-Rose

                                              • 20. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                                dixey-rose Community Member

                                                Hi Gramps,

                                                I managed to remove the white border...working on the others.  Oh, now I see in your message that you already told me how to do that...ooops :-).  Thanks

                                                • 21. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                                  Ben Pleysier CommunityMVP

                                                  @ Ken

                                                   

                                                  I love your interpretation, Lucifer in camouflage!

                                                   

                                                  Ben

                                                  • 22. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                                    dbarclay12 Community Member

                                                    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

                                                    • 23. Re: Drop-down menu in Dreamweaver CS5.5 not displaying
                                                      ariej Community Member

                                                      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