Skip navigation
Currently Being Moderated

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

Apr 10, 2012 7:24 AM

Tags: #cs5 #error #image #adobe #div #html #dreamweaver #javascript #css #menu #code #dw

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

 
Replies
  • Currently Being Moderated
    Apr 10, 2012 7:35 AM   in reply to hannahmeow

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 7:51 AM   in reply to hannahmeow

    Copy the code from a page that works

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 8:10 AM   in reply to hannahmeow

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 8:27 AM   in reply to martcol

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 8:28 AM   in reply to martcol

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

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 8:59 AM   in reply to hannahmeow

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 9:19 AM   in reply to martcol

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 2:10 PM   in reply to hannahmeow

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 4:04 PM   in reply to hannahmeow

    Hi Hannah,

     

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

     

    Good luck!

    Hans-Günter

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points