3 Replies Latest reply: Apr 12, 2012 5:53 PM by Ben Pleysier RSS

    How do I make the Dreamweaver submenu box disappear when not in use?

    VickiA95124 Community Member

      Hi - Can someone help me correctly hide the submenu boxes when the submenu items aren't in use? I have been able to hide the submenu boxes, but when I do, they up being jumbled behind the main menu items. This is with Dreamweaver CS5.5. Right now the submenu boxes appear properly when you mouse over them, but when not in use you see an empty white box in the navigational menu.

       

      Thanks!!!

       

      http://www-rohan.sdsu.edu/~alexandv/cccsite/index.htm

        • 1. Re: How do I make the Dreamweaver submenu box disappear when not in use?
          Ben Pleysier CommunityMVP

          When changing the properties and or their values in SpryMenuBarVertical.css, you must read the comments. This way you will not encounter any of the problems that you have got.

           

          Have a look at the following

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

           

          LAYOUT INFORMATION: describes box model, positioning, z-order

           

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

           

          /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */

          ul.MenuBarVertical

          {

              margin: 0;

              padding: 0;

              list-style-type: none;

              font-size: 100%;

              cursor: default;

              width: 11em;

              border-top-color: #FFFFFF;

              border-right-color: #FFFFFF;

              border-bottom-color: #FFFFFF;

              border-left-color: #FFFFFF;

              color: #FFFFFF;

              background-color: #FFFFFF;

              scrollbar-3d-light-color: #FFFFFF;

              float: inherit;

          }

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

          }

          /* Menu item containers, position children relative to this container and are same fixed width as parent */

          ul.MenuBarVertical li

          {

              padding: 0;

              list-style-type: none;

              font-size: 100%;

              position: relative;

              text-align: left;

              cursor: pointer;

              width: 10em;

              border-top-color: #FFFFFF;

              border-style: groove;

              border-right-color: #FFFFFF;

              border-bottom-color: #FFFFFF;

              border-left-color: #FFFFFF;

              background-color: #FFFFFF;

              margin: 0;

          }

          /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

          ul.MenuBarVertical ul

          {

              margin: -5% 0 0 95%;

              padding: 0;

              list-style-type: none;

              font-size: 100%;

              position: absolute;

              cursor: default;

              width: 8.2em;

              top: 0;

              z-index: 1020;

              left: -1000em;

             column-rule-color: #FFFFFF;

          }

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

           

          DESIGN INFORMATION: describes color scheme, borders, fonts

           

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

          /* Submenu containers have borders on all sides */

          ul.MenuBarVertical ul

          {

              border: 1px solid #CCC;

             position: absolute;

              margin: 10.2;

              font-size: 100%;

          }

          You might also like to have a look at lines 91 and 92 and remove those rogue element end tags.

           

          Gramps

          • 2. Re: How do I make the Dreamweaver submenu box disappear when not in use?
            VickiA95124 Community Member

            Thanks so much for responding!  Following the comments solved my problem with the navigational menu. I now have a properly functioning menu.

             

            Additional question, though - is there an easy way to make the submenu items appear below each of the main menu items (instead of flying out to the right)?

             

            Thanks again!

            Vicki

            • 3. Re: How do I make the Dreamweaver submenu box disappear when not in use?
              Ben Pleysier CommunityMVP

              /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

              ul.MenuBarVertical ul

              {

                  margin: 20% 0 0 5%; /* changed from -5% 0 0 95% */

                  padding: 0;

                  list-style-type: none;

                  font-size: 100%;

                  position: absolute;

                  z-index: 1020;

                  cursor: default;

                  width: 8.2em;

                  left: -1000em;

                  top: 0;

              }

              Gramps