6 Replies Latest reply on Feb 4, 2010 12:12 PM by SiberianSiren

    Resizing Spry Sub Menus

    SiberianSiren4

      Help! I have created a lovely menu bar, but when you click on an item or sub item the box expands wider than the 100px I have set for widths. I have spent hours trying to solve this. Any suggestions?
       
      See problem at http://armstronggraphics.com

        • 1. Re: Resizing Spry Sub Menus
          hans-g. Adobe Community Professional & MVP

          Hi,

           

          on your http://armstronggraphics.com I can't see anything. Could it be that you mean this site: http://armstronggraphics.com/portfolio/?

           

          Hans-G.

          • 2. Re: Resizing Spry Sub Menus
            hans-g. Adobe Community Professional & MVP

            Hi,

             

            and did you control here in the "SpryMenuBarHorizontal.css" by UL.MenuBarHorizontal Li:

             

             

            /* Menu item containers, position children relative to this container and are same fixed width as parent */
            UL.MenuBarHorizontal LI {
            PADDING-RIGHT: 0px;
            PADDING-LEFT: 0px;
            FONT-SIZE: 100%;
            FLOAT: left;
            PADDING-BOTTOM: 0px;
            MARGIN: 0px;
            WIDTH: 128px;
            CURSOR: pointer;
            PADDING-TOP: 0px;
            LIST-STYLE-TYPE: none;
            POSITION: relative;
            TEXT-ALIGN: left
            }

             

            Here are your possibilities.

             

            Hans-G.

            • 4. Re: Resizing Spry Sub Menus
              David_Powers Adobe Community Professional

              Please do not post the same question in more than one place. Your identical question has been deleted from the Dreamweaver help pages. If you need any further help with this issue, please keep it in this thread.

              • 5. Re: Resizing Spry Sub Menus
                SiberianSiren

                Thank you for the reply, but the tutorial does not help. I have already applied the widths to the li, ul and ul li.

                • 6. Re: Resizing Spry Sub Menus
                  SiberianSiren Level 1

                  Thank you for the email and directing me to the right location! There is nothing shown on my account pages.

                  The menu bar IS on my armstrong graphics home page, not the portfolio. Below is the code from the sections of my spry sheet that should be controling the size. Please let me know if you find a problem there.

                   

                  /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
                  ul#MenuBar1.MenuBarHorizontal
                  {
                      margin: 0;
                      padding: 0;
                      list-style-type: none;
                      font-size: 100%;
                      cursor: default;
                      width: auto;
                      margin-left: 450px;
                      margin-top: 50px;
                     
                  }
                  /* 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: 100px;
                      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
                  {
                      width: 100px;
                      margin: 0;
                      padding: 0;
                      list-style-type: none;
                      font-size: 100%;
                      z-index: 1020;
                      cursor: default;
                      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: 100px;
                  }
                  /* 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;

                   

                   

                  Thank you!