18 Replies Latest reply: Apr 10, 2012 4:04 PM by hans-g. RSS

    my spry drop down menu options don't drop down in my menu bar

    hannahmeow

      My spry menu bar in one of my pages isn't working properly. it's doing it in both chrome and IE. I suspected that it was something to do with the z-index because the is some images right below the menu bar, however, i altered this and it made no difference. Perhaps someone can suggest a reason why my menu bar options arent dropping down. - Bearing in mind this is only on one of my pages. i'm unable to post the link as my site isn't published yet. but if it helps, i can post the html or css

      thanks

        • 1. Re: my spry drop down menu options don't drop down in my menu bar
          martcol Community Member

          hannahmeow wrote:

           

          My spry menu bar in one of my pages isn't working properly. it's doing it in both chrome and IE. I suspected that it was something to do with the z-index because the is some images right below the menu bar, however, i altered this and it made no difference. Perhaps someone can suggest a reason why my menu bar options arent dropping down. - Bearing in mind this is only on one of my pages. i'm unable to post the link as my site isn't published yet. but if it helps, i can post the html or css

          thanks

          So it is working in all your other pages?

           

          It would be helpful to see your code and a live page is probably best.  Are you using position: absolute by any chance? On other elements.  Post your code but my first inclination would be to suggest you scruitnise your codea and make sure you haven't inadvertantly deleted a closing tag or something.

           

          Martin

          • 2. Re: my spry drop down menu options don't drop down in my menu bar
            Ken Binney MVP

            Copy the code from a page that works

            • 3. Re: my spry drop down menu options don't drop down in my menu bar
              hannahmeow Community Member

              this is the code which the menu bar doesnt work properly

               

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

              <title>Women's accessories</title>

              <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

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

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

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

               

               

              </head>

               

               

              <style type="text/css">

              </style>

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

              <body>

              <div id="wrapper">

              <img src="product and website photos/header.png" width="1064" height="116" alt="header" />

               

                  <!--begin menu -->

              <ul id="MenuBar1" class="MenuBarHorizontal">

              <li><a href="#home.html">Home</a></li>

              <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>

              <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>

              <li><a href="bwt.html">Tops</a></li>

              <li><a href="bws.html">Skirts/Shorts</a></li>

              <li><a href="bwl.html">Trousers/Leggings</a></li>

              <li><a href="bwa.html">Accessories</a></li>

              <li><a href="bwd.html">Dresses</a></li></ul></li>

              <li><a href="#" class="MenuBarItemSubmenu">Men</a>

                <ul>

                  <li><a href="#">Tops</a></li>

                  <li><a href="#">Bottoms</a></li>

                  <li><a href="#">Accessories</a></li>

                </ul>

              </li>

              <li><a href="#">Semi-Unique</a></li>

              </ul>

              </li>

              <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>

              <li><a href="t-shirt shop.html">Men</a></li>

              <li><a href="t-shirt shop.html">Women</a></li>

              <li><a href="t-shirt shop.html">Unique</a></li>

              </ul></li>

              <li><a href="clearance.html">Clearance</a></li>

              <li><a href="#">About</a></li>

              </ul>

              <img src="product and website photos/DSC_0058.JPG" alt="earrings1" width="262" height="280" />

              <img src="product and website photos/DSC_0062.JPG" width="262" height="280" alt="earrings2" />

              <img src="product and website photos/DSC_0063.JPG" width="262" height="280" alt="bracelet1" />

              <img src="product and website photos/DSC_0065.JPG" alt="bracelet2" width="262" height="280" />

              <img src="product and website photos/DSC_0069.JPG" width="260" height="280" alt="bracelet3" />

                  <div id="footer">

              <p>&copy; 2012 your footer text goes here

              </p> <!--end footer --></div>

               

               

              <!--end wrapper --></div>

              <script type="text/javascript">

               

               

              <script type="text/javascript">

              var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

              </script>

              </body>

              </html>

              • 4. Re: my spry drop down menu options don't drop down in my menu bar
                hannahmeow Community Member

                ThIs the the code that does work. There is a separate css for the menu bar which i have attached to all of my pages

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <title>Untitled Document</title>

                 

                 

                <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

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

                 

                 

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

                </head>

                 

                 

                <style type="text/css">

                </style>

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

                <body>

                <div id="wrapper">

                <img src="product and website photos/header.png" width="1064" height="116" alt="header" />

                 

                 

                <!--begin menu -->

                <ul id="MenuBar1" class="MenuBarHorizontal">

                <li><a href="#home.html">Home</a></li>

                <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>

                <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>

                <li><a href="bwt.html">Tops</a></li>

                <li><a href="bws.html">Skirts/Shorts</a></li>

                <li><a href="bwl.html">Trousers/Leggings</a></li>

                <li><a href="bwa.html">Accessories</a></li>

                <li><a href="bwd.html">Dresses</a></li></ul></li>

                <li><a href="#" class="MenuBarItemSubmenu">Men</a>

                  <ul>

                    <li><a href="#">Tops</a></li>

                    <li><a href="#">Bottoms</a></li>

                    <li><a href="#">Accessories</a></li>

                  </ul>

                </li>

                <li><a href="#">Semi-Unique</a></li>

                </ul>

                </li>

                <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>

                <li><a href="t-shirt shop.html">Men</a></li>

                <li><a href="t-shirt shop.html">Women</a></li>

                <li><a href="t-shirt shop.html">Unique</a></li>

                </ul></li>

                <li><a href="clearance.html">Clearance</a></li>

                <li><a href="#">About</a></li>

                </ul>

                 

                 

                <img src="product and website photos/dreadmadeby.png" alt="DREADAD" width="1064" height="561" />

                 

                 

                <div id="footer">

                <p>&copy; 2012 your footer text goes here

                </p> <!--end footer --></div>

                 

                 

                <!--end wrapper --></div>

                <script type="text/javascript">

                 

                 

                var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                 

                 

                </script>

                • 5. Re: my spry drop down menu options don't drop down in my menu bar
                  martcol Community Member

                  I suggested earlier that you scrutinise the code.

                   

                  Scrutinise this bit to start with.  That's as far as I looked...

                   

                  <ul id="MenuBar1" class="MenuBarHorizontal">

                  <li><a href="#home.html">Home</a></li>

                  <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>

                  <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>

                  <li><a href="bwt.html">Tops</a></li>

                  <li><a href="bws.html">Skirts/Shorts</a></li>

                  <li><a href="bwl.html">Trousers/Leggings</a></li>

                   

                  What should you close an <li> element with?

                   

                  Martin

                  • 6. Re: my spry drop down menu options don't drop down in my menu bar
                    hannahmeow Community Member

                    This part of the code is exactly the same in the one that works

                    • 7. Re: my spry drop down menu options don't drop down in my menu bar
                      martcol Community Member

                      martcol wrote:

                       

                      I suggested earlier that you scrutinise the code.

                       

                      Scrutinise this bit to start with.  That's as far as I looked...

                       

                      <ul id="MenuBar1" class="MenuBarHorizontal">

                      <li><a href="#home.html">Home</a></li>

                      <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>

                      <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>

                      <li><a href="bwt.html">Tops</a></li>

                      <li><a href="bws.html">Skirts/Shorts</a></li>

                      <li><a href="bwl.html">Trousers/Leggings</a></li>

                       

                      What should you close an <li> element with?

                       

                      Martin

                      And those bits?

                      • 8. Re: my spry drop down menu options don't drop down in my menu bar
                        martcol Community Member

                        If that's the same in both pages then both pages are wrong.  An <li> closes with a </li> not <ul>

                         

                        Martin

                        • 9. Re: my spry drop down menu options don't drop down in my menu bar
                          hannahmeow Community Member

                          Yes, I have posted both codes, the one where the menu bar works properly and the one which doesn't.

                          • 10. Re: my spry drop down menu options don't drop down in my menu bar
                            hannahmeow Community Member

                            Okay, well i have changed them from <ul> to </li>, but now parts have the menu bar have moved all over the page.

                             

                            <!--begin menu -->

                            <ul id="MenuBar1" class="MenuBarHorizontal">

                            <li><a href="#home.html">Home</a></li>

                            <li><a href="#" class="MenuBarItemSubmenu">Boutique</a></li>

                            <li><a href="#" class="MenuBarItemSubmenu">Women</a></li>

                            <li><a href="bwt.html">Tops</a></li>

                            <li><a href="bws.html">Skirts/Shorts</a></li>

                            <li><a href="bwl.html">Trousers/Leggings</a></li>

                            <li><a href="bwa.html">Accessories</a></li>

                            <li><a href="bwd.html">Dresses</a></li></ul></li>

                            <li><a href="#" class="MenuBarItemSubmenu">Men</a></li>

                              <ul>

                                <li><a href="#">Tops</a></li>

                                <li><a href="#">Bottoms</a></li>

                                <li><a href="#">Accessories</a></li>

                              </ul>

                            </li>

                            <li><a href="#">Semi-Unique</a></li>

                            </ul>

                            </li>

                            <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a></li>

                            <li><a href="t-shirt shop.html">Men</a></li>

                            <li><a href="t-shirt shop.html">Women</a></li>

                            <li><a href="t-shirt shop.html">Unique</a></li>

                            </ul></li>

                            <li><a href="clearance.html">Clearance</a></li>

                            <li><a href="#">About</a></li>

                            </ul>

                            • 11. Re: my spry drop down menu options don't drop down in my menu bar
                              martcol Community Member

                              </head>

                               

                               

                              <style type="text/css">

                              </style>

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

                               

                              Should be this way around:

                               

                              <style type="text/css">

                              </style>

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

                              </head>

                               

                              And the <style type="text/css"> </style> is obsolete anyway.  It has no styles in it.

                               

                              Martin

                              • 12. Re: my spry drop down menu options don't drop down in my menu bar
                                martcol Community Member

                                So does this do it?

                                 

                                <ul id="MenuBar1" class="MenuBarHorizontal">

                                  <li><a href="#home.html">Home</a></li>

                                  <li><a href="#" class="MenuBarItemSubmenu">Boutique</a>

                                    <ul>

                                      <li><a href="#" class="MenuBarItemSubmenu">Women</a>

                                        <ul>

                                          <li><a href="bwt.html">Tops</a></li>

                                          <li><a href="bws.html">Skirts/Shorts</a></li>

                                          <li><a href="bwl.html">Trousers/Leggings</a></li>

                                          <li><a href="bwa.html">Accessories</a></li>

                                          <li><a href="bwd.html">Dresses</a></li>

                                        </ul>

                                      </li>

                                      <li><a href="#" class="MenuBarItemSubmenu">Men</a>

                                        <ul>

                                          <li><a href="#">Tops</a></li>

                                          <li><a href="#">Bottoms</a></li>

                                          <li><a href="#">Accessories</a></li>

                                        </ul>

                                      </li>

                                    </ul>

                                  </li>

                                  <li><a href="#">Semi-Unique</a>

                                    <ul>

                                      <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a></li>

                                      <li><a href="t-shirt shop.html">Men</a></li>

                                      <li><a href="t-shirt shop.html">Women</a></li>

                                      <li><a href="t-shirt shop.html">Unique</a></li>

                                      <li><a href="clearance.html">Clearance</a></li>

                                    </ul>

                                  </li>

                                  <li><a href="#">About</a></li>

                                </ul>

                                 

                                I might not have got your nesting exactly correct.

                                 

                                Martin

                                • 13. Re: my spry drop down menu options don't drop down in my menu bar
                                  hannahmeow Community Member

                                  no it still doesn't work :/

                                  • 14. Re: my spry drop down menu options don't drop down in my menu bar
                                    hannahmeow Community Member

                                    I have discovered that it does not this page that doesn't work. and some of the buttons don't link (even though it's currently linked) This is the CSS for the menu bar:

                                     

                                    @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

                                    {

                                              padding: 0;

                                              list-style-type: none;

                                              font-size: 100%;

                                              cursor: default;

                                              width: 640px;

                                              margin-bottom: 0;

                                              margin-left: auto;

                                              border-top-style: none;

                                              border-right-style: none;

                                              border-bottom-style: none;

                                              border-left-style: none;

                                              border-top-color: #000;

                                              border-right-color: #000;

                                              border-bottom-color: #000;

                                              border-left-color: #000;

                                              margin-right: auto;

                                              z-index: auto;

                                    }

                                     

                                     

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

                                    }

                                    #header {

                                              clip: rect(auto,auto,auto,auto);

                                     

                                    }

                                     

                                     

                                     

                                     

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

                                    }

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

                                    {

                                              margin: 0;

                                              padding: 0;

                                              list-style-type: none;

                                              font-size: 100%;

                                              z-index: 1020;

                                              cursor: default;

                                              width: 67px;

                                              position: absolute;

                                              left: -1000em;

                                              height: -1px;

                                              top: 53px;

                                    }

                                     

                                     

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

                                     

                                     

                                    DESIGN INFORMATION: describes color scheme, borders, fonts

                                     

                                     

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

                                     

                                     

                                    /* Submenu containers have borders on all sides */

                                    ul.MenuBarHorizontal ul

                                    {

                                              border: 1px solid #CCC;

                                    }

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

                                    }

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

                                    ul.MenuBarHorizontal ul li

                                    {

                                              width: 8.7em;

                                    }

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

                                    ul.MenuBarHorizontal ul ul

                                    {

                                              margin-right: 0;

                                              margin-bottom: 0;

                                    }

                                    /* 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: -142px;

                                              top: 7px;

                                    }

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

                                    ul.MenuBarHorizontal a

                                    {

                                              display: block;

                                              cursor: pointer;

                                              background-color: #FFF;

                                              padding: 0.5em 0.75em;

                                              color: #000;

                                              text-decoration: none;

                                              font-family: Pristina;

                                              font-size: 21px;

                                              text-align: center;

                                    }

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

                                              color: #999;

                                              font-family: Pristina;

                                    }

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

                                              color: #999;

                                              font-family: Pristina;

                                    }

                                    /* 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(SpryAssets/SpryMenuBarRight.gif);

                                              background-repeat: no-repeat;

                                              background-position: 95% 50%;

                                              font-size: 21px;

                                    }

                                    /* 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(SpryAssets/SpryMenuBarDownHover.gif);

                                              background-repeat: no-repeat;

                                              background-position: 95% 50%;

                                              font-size: 21px;

                                    }

                                     

                                     

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

                                     

                                     

                                    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(SpryAssets/SpryMenuBarDown.gif);

                                              background-repeat: no-repeat;

                                              background-position: 95% 50%;

                                    }

                                    /* 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(SpryAssets/SpryMenuBarRightHover.gif);

                                              background-repeat: no-repeat;

                                              background-position: 95% 50%;

                                              font-size: 21px;

                                    }

                                     

                                     

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

                                     

                                     

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

                                    {

                                              z-index: 1010;

                                     

                                     

                                     

                                     

                                              filter:alpha(opacity:0.1);

                                              font-size: 21px;

                                    }

                                              ul.MenuBarHorizontal li.MenuBarItemIE

                                              {

                                              display: none;

                                              background: #FFF;

                                              font-size: 21px;

                                              }

                                    • 15. Re: my spry drop down menu options don't drop down in my menu bar
                                      hans-g. MVP

                                      Hello Hannah,

                                       

                                      there is something in your code I think you should control:

                                       

                                      Header 1Header 2
                                      your codemy code (I inserted only a spry menu into a new "naked" html file)

                                      <title>Untitled Document</title>

                                       

                                      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

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

                                      </head>

                                      <title>Untitled Document</title>

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

                                       

                                       

                                      </head>

                                      Do you have two of them?

                                      A "ccs main.css" and a "main.css"

                                      I couldn't find this absolutely necessary "SpryMenuBarHorizontal.css" rule in your source code.

                                       

                                      Could be you that you need these ../ (or perhaps not). I used them here in an anticipatory manner.

                                       

                                      Hans-Günter

                                      • 16. Re: my spry drop down menu options don't drop down in my menu bar
                                        hannahmeow Community Member

                                        "ccs main.css" is the menu bar.(the css code i most recently posted) - it's a long story why it's called that, i should change it.

                                        • 17. Re: my spry drop down menu options don't drop down in my menu bar
                                          hannahmeow Community Member

                                          All sorted, not sure how i did it. I basically just made a new menu bar in a new file, and copied the new parts and replaced the others. It some how started working Thanks everyone

                                          • 18. Re: my spry drop down menu options don't drop down in my menu bar
                                            hans-g. MVP

                                            Hi Hannah,

                                             

                                            "not sure how i did it." Naja, I would call it "courageously"!

                                             

                                            Good luck!

                                            Hans-Günter