12 Replies Latest reply on Apr 23, 2011 11:45 AM by Nancy OShea

    why is submenu under the images?

    jennifer0329

      Hi!

      Can anyone help me figure out why my submenu hides under the image when it appears? I need it to be OVER the image so you can read it? Here is the link:

      http://www.cinemashopphoto.com/indexphoto.html

      Thanks so much!

        • 1. Re: why is submenu under the images?
          hans-g. Adobe Community Professional & MVP

          Hi Jennifer,

           

          in my IE 8 I can see your submenu in this way for example:

           

           

          drSubm.jpg

           

          what means you only have to adapt your "SpryMenuBarVertical.css" a little bit, if I understand you in the right way, naturally.

           

          Hans-Guenter

          • 2. Re: why is submenu under the images?
            hans-g. Adobe Community Professional & MVP

            Hi,

             

            same with your "MenuBarHorizontal", where you only need to adapt the width:

             

            drSubm02.jpg

             

            Hans-G.

            • 3. Re: why is submenu under the images?
              Nancy OShea Adobe Community Professional & MVP

              Hi,

               

              In your Spry Vertical style sheet, change this section of CSS code:

               

              /* 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
              {
                  padding: 0;
                  list-style-type: none;
                  font-size: 100%;
                  position: absolute;
                  z-index: auto;
                  cursor: default;
                  width: 200px;
                  left: 1020px;
                  top: 0;
                  border: thin solid #666;
                  margin-top: 0%;
                  margin-right: 0;
                  margin-bottom: 0;
                  margin-left: 95%;

              }

               

              to this:

               

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

              {

                  padding: 0;

                  list-style-type: none;

                  font-size: 100%;

                  position: absolute;

                  z-index: 1000;

                  cursor: default;

                  width: 200px;

                  left: 0;

                  top: 0;

                  border: thin solid #666;

                  margin: -5% 0  0 95%;

              }

               

              Hope this helps,

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists 
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: why is submenu under the images?
                jennifer0329 Level 1

                OK, I made the changes, now one part of the menu is stuck underneath the image and the rest won't even

                come up when prompted.....suggestions?

                 

                http://www.cinemashopphoto.com/indexphoto.html

                • 5. Re: why is submenu under the images?
                  hans-g. Adobe Community Professional & MVP

                  Hi Jennifer,

                   

                  I would like to start with your "SpryMenuBarHorizontal.css". At the moment my IE 8 shows me this:

                   

                  drHorF.jpg

                   

                  After this little change here:

                   

                  /* Menu item containers, position children relative to this container and are a fixed width */
                  ul.MenuBarHorizontal li
                  {
                  margin: 0;
                  padding: 0 1px;
                  list-style-type: none;
                  font-size: 100%;
                  position: relative;
                  text-align: center;
                  cursor: pointer;
                  width: 172px;
                  /* width: 174px;*/
                  float: left;
                  border: thin solid #666;
                  }

                   

                  I got this:

                  drHorG.jpg


                  The vertical part (SpryMenuBarVertical.css), I'll take as soon as possible.Hans-G.

                  • 6. Re: why is submenu under the images?
                    hans-g. Adobe Community Professional & MVP

                    Hi Jennifer,

                     

                    here is my second part, and I hope that's what you need. It's a stylistic still very rough draft to see the principle. I made it with two sub-menus:

                    drHorSubMen.jpg

                    What did I do? First I looked at example two (This is a standard vertical menu bar. All menu items are stacked vertically.) of

                     

                    http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

                     

                    After that I downloaded these necessary, original widget files to my DW (they are written here:

                     

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

                    <link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
                    <link href="../../widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
                    <script src="../../widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>

                     

                    and put them in my own directory. After that I took your "indexphoto.html" and linked these files to this directory. PUH!!! it requires a little bit of high concentration.Now,we/you customize this raw material to suit your needs.

                     

                    Hans-G.

                    • 7. Re: why is submenu under the images?
                      hans-g. Adobe Community Professional & MVP

                      Hi Jennifer,

                       

                      just a suggestion: Why do you not use a vertical menu instead. An accordion or a collapsible panel, for example. The advantage would be: nothing moves to the right side into your images or your slide shows, all would be limited on your left side.

                       

                      Hans-G.

                      • 8. Re: why is submenu under the images?
                        martcol Level 4

                        I have a sneaky suspicion that your menu is not properly formed.

                         

                        It's really tricky staring at these menus and sub-menus so forgive me if I have it wrong.  It looks like after your first sub-menu, "engagement, maternity, babies," you have a missing </ul>

                         

                        Now, with your menu being obscured by your flash, isn't that something to do with its position absolute or postion relative on the container?  It might be fixable to adjust the z-index to change that?  Hmmmm.  It's worth researching a bit more.

                         

                        Best of luck

                         

                        Martin

                        • 9. Re: why is submenu under the images?
                          hans-g. Adobe Community Professional & MVP

                          Hi Martin,

                           

                          I'm assuming that you did not want to send your reply at me, but at Jennifer.Hans-G.

                          • 10. Re: why is submenu under the images?
                            jennifer0329 Level 1

                            Sorry, I became so frustrated I moved onto another project.....All I did to create this vertical menu was choose insert-spry-spry menu bar and then changed all the names as directed. So, yes all of your suggestions above are there and correct. Only problem is that the submenus fall under the photo slideshow and I need them above.

                            I'm not sure which change I made from all the directions, but now my submenu is "stuck" to the right of the main menu and won't "pop out" when prompted.

                             

                            As far as the horizontal menu, when I tried your suggestions, each tab became the entire length of the page so I put t back to the way I had it.

                             

                            I agree with martcol that I probably have a menu issue but I'm not sure what that is???

                            • 11. Re: why is submenu under the images?
                              hans-g. Adobe Community Professional & MVP

                              Hello again,

                               

                              please forget your vertical Spry-menu with these horizontal sub-menues and use what I said in Nr. 7.

                               

                              Hans-G.

                              • 12. Re: why is submenu under the images?
                                Nancy OShea Adobe Community Professional & MVP

                                Hi Jennifer,

                                 

                                Re: Vertical menu

                                 

                                You have asterisks ( * )  in your CSS code which is causing it to mess up.

                                Remove the asterisks from your CSS rules and your vertical menu will work correctly.

                                 

                                ul.MenuBarVertical ul
                                {
                                    padding: 0;
                                    list-style-type: none;
                                    font-size: 100%;
                                    position: absolute;
                                *  z-index: 1000;  *
                                    cursor: default;
                                    width: 200px;
                                *  left: 0;  *
                                    top: 0;
                                    border: thin solid #666;
                                    margin: -5% 0  0 95%;
                                }

                                 

                                As Martin said, you have a few HTML code errors which can effect browser display.   Use the W3C code validation tools often during development.  These tools help identify errors you might not be aware of.

                                 

                                Code Validation Tools
                                ------------------------------------
                                CSS - http://jigsaw.w3.org/css-validator/
                                HTML - http://validator.w3.org/

                                 

                                 

                                Nancy O.
                                Alt-Web Design & Publishing
                                Web | Graphics | Print | Media  Specialists 
                                http://alt-web.com/
                                http://twitter.com/altweb