Spry menu bar doesnt drop down

Why doesnt my spry menu bar drop down anymore.
<!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="file:///Macintosh HD/Users/jermainemclaughlin/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/Temp/Assets/eam331d0c78.TMP/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Users/jermainemclaughlin/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/Temp/Assets/eam331d0c78.TMP/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<!--
<oa:widgets>
  <oa:widget wid="2149023" binding="#social" />
</oa:widgets>
-->
<link href="wdm_template.dwt" rel="stylesheet" type="text/css" />
<link href="template.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#wrapper {
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <h1> </h1>
  <div>
    <div id="banner"><img src="../FINISHED HEADERS/newbanner.jpg" width="999" height="200" alt="banner" /></div>
  </div>
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="../HTML PAGES/home.html">Home</a>    </li>
    <li><a href="#" class="MenuBarItemSubmenu">The Leaders</a>
      <ul>
        <li><a href="../HTML PAGES/bishop_whyte.html">Bishop R.A Whyte</a></li>
        <li><a href="../HTML PAGES/pastor_cooper.html">Pastor Betty Cooper</a></li>
        <li><a href="../HTML PAGES/pastor_jermaine.html">Pastor Jermaine McLaughlin</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
      <ul>
        <li><a href="../HTML PAGES/declaration.html">Declaration of Faith</a></li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
    </li>
    <li><a href="../HTML PAGES/partners.html">Partnership</a></li>
    <li><a href="../HTML PAGES/PRAYER_REQUEST.html">Prayer Request</a></li>
    <li><a href="../HTML PAGES/donations.html" class="MenuBarItemSubmenu">Donate</a>
      <ul>
        <li><a href="#">Donate Now</a></li>
        <li><a href="#">Automatic Giving</a></li>
      </ul>
    </li>
    <li><a href="../HTML PAGES/contact_us.html">Contact Us</a></li>
  </ul>

The following files cannot be found outside of the local environment
<script src="file:///Macintosh HD/Users/jermainemclaughlin/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/Temp/Assets/eam331d0c78.TMP/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Users/jermainemclaughlin/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/Temp/Assets/eam331d0c78.TMP/SpryMenuBarHori zontal.css" rel="stylesheet" type="text/css" />
Gramps

Similar Messages

  • Spry Menu Bars not dropping down in Firefox/IE

    I recently published a website and found that my menu bars dont drop down in Firefox or IE, except the first cell on the first menu bar.
    Here is the address: http://www.tvnewsjunkie.com/
    Thanks,
    Grant

    There are too much sloppy coding to go through them all.
    To help you on your way
    line 4980: missing closing DIV tag
    line 3693: missing closing LI tag
    line 142: empty LI element.
    If you delete line 142, the first three menus will work, but then there is something that is stopping the rest to work.
    Gramps

  • Font in Menu Bar and Drop Down list way too small

    I just tried PSE 10 and was very surprised to see that Adobe did not address the problem with the font size being way too small in the menu bar and drop down list.  I cannot possibly read the font - so the program is basically unusable.  I am using a new 17inch laptop.  Is it possible that after all the complaints Adobe didn't fix this problem in PSE 10?  Are they even working on it?  I love the program but unfortunately I am going to have to switch to something else because there is no way I can read the font and thus cannot use the program at all.  Very, very disappointing.  Hopefully they are working on a fix???

    Photoshop CS5 Essential has preferences that offer users the opportunity to adjust menu bar background color as well as font size.  For example,
    "UI Font Size
    If you find that Photoshop's interface text is a little too small for comfort, you can increase its size by changing the UI Font Size option to either Medium or Large. And no, this option isn't just for old folks with poor eye sight. Working on a very high resolution monitor can make Photoshop's interface text appear very small. Personally, I like to set my font size to Large which I find helps to avoid eye strain. You'll need to close and then re-open Photoshop for the change to take effect:
    Change the font size to increase some of the text in Photoshop's interface.
    (From an article by Steve Patterson at http://www.photoshopessentials.com/basics/cs5/preferences/ .
    Why not Photoshop Elements?  ?
    Lensw

  • Can anyone tell me how to increase the text size in my menu bar and drop down menus?

    Just bought a new 27" screen iMac.  The menu bar and drop down menu text is much to small for me to see without leaning close to the screen.  Does anyone know how to customize the text to a larger size.  This is an issue for any program I open.

    Once upon a time Apple displays packed in 72 dots to an inch (making their resolution 72 DPI). That meant that what we saw on screen at 100% scale was exactly what was printed on a printer - not to mention quite comfortable to read. However that advantage was eclipsed by the fact that photopgraphs and video were pixelated and the only solution to that was to increase the resolution - to pack in more dots per inch - which has the side effect of shrinking the size of text. Where I once used Word at 100% scale I now find it most comfortable at 150% scale.
    There are several solutions. One, as Lex gave you, was to reduce the resolution of the LCD display. But unlike CRT displays, an LCD is tuned to a specific resolution and when you change it the results tend to be blurry. Another is to keep the resolution as it is and to adjust each program (if the program allows it). This makes Word usable and your browser can be set to use no font smaller than a size you set (which has some unpleasant side affects at some Web sites), but some programs and some parts of programs cannot be changed. The menubar and menus are among them. The third solution is one that Apple promised several years ago but has not yet provided - a resolution independant GUI. We can only hope that comes soon. And there's another partial solution - look in System Preferences under Accessibility.

  • Spry menu bar doesnt work in IE

    Hi,
    I have created a new site in dreamweaver cs5 that works fine in firefox and safari but in IE the spry menu bar does not appear. It does not show at all until you put the mouse over it then the rollover box shows and you are able to click on it to get to the page. The whole bar does not show at all, just each box once you put mouse in area???
    Any ideas what is wrong??
    This is the site : www.adamthomastherapy.co.uk
    Thanks,
    Katie

    Change the rule
    ul.MenuBarHorizontal a {
        background-image: url("../../../../../../../../../Desktop/Adams%20site/buttons.gif");
        color: #FFFFFF;
        cursor: pointer;
        display: block;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
        text-decoration: none;
    to
    ul.MenuBarHorizontal a {
        background-image: url("../Gifs/buttons.gif");
        color: #FFFFFF;
        cursor: pointer;
        display: block;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
        text-decoration: none;
    This path to your image seems quite wrong and overrides the li background. White text on white background (for IE), you cannot see anything.

  • Spry Menu Bar goes to left of screen

    I've done a horizontal Spry Menu Bar and drop down menu on one of the  menu buttons.
    When I roll over this, the entire Menu Bar drops down to  the left hand side of the screen in a vertical format - would anyone  know why?
    I'm a complete newby to this, so small words is appreciated LOL

    Hi,
    Can you post a link to your problem page.
    Regards
    Manoj

  • Spry Menu Bar using CSS background image without losing submenu ( V) indicators

    Spry menu bar sets the down and side submenu indicators using
    a positioned background image. I have a requirement to use a
    specific background image yet must retain the > and v submenu
    indicators. Without having to generate full width custom background
    images for each of the menu item types to include the side and down
    menu indicators, is there anyway to use a generic background image
    and show the indicators using just CSS?

    Don't use reserved words in JS
    var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
    event is such a reserved word. If you change this to event1 then all is well.
    I hope this helps.
    Ben

  • Spry menu bar -- only one of the submenus of a drop down set works.

    I created a spry drop-down menu bar for navigation within my site for a special event (on October 19). Most items have only one filie (e.g., tickets) but some of the items (e.g., Historic Homes) have up to 8 sub-items.
    I renamed the spry file. I defined all my menu and sub menu items using the dialog box. I styled the bar for both basic state and "hover."
    So far, so good.
    I then created multiple new pages by using "Save As" (the original menu bar file)-- substituting appropriate text to to make the additional item and sub item files.
    But when I link it all up and test it, only ONE of the submenus work. The menu disappears from the other sub menu pages when I navigate to them. Users can't get back to the original menu choices..
    This is the first time with a Spry Menu bar.
    Can you help?
    Susan

    Without seeing your code, I'm guessing your lists and sub-lists are not properly coded. Check your HTML & CSS with the validation tools below:
    Code validation tools
    CSS - http://jigsaw.w3.org/css-validator/
    HTML - http://validator.w3.org/
    Nancy O.

  • In Firefox 4, how do I get back the context menu for the drop down list of the Location Bar so I can Open Link in New Tab, which I did often in FF 3?

    Firefox 3 has a context menu for the drop down list of
    the Location Bar. One option on this menu I used often
    is "Open Link in New Tab" -- quite convenient.
    This context menu has disappeared in Firefox 4.
    Can I get it back?

    See also:
    *Tools > Options > Privacy > History: "Remember search and form history"
    *https://support.mozilla.org/kb/Form+autocomplete
    The "Use custom settings for history" setting allows to see the current history and cookie settings, but selecting that setting doesn't make any changes to history and cookie settings.<br />
    Firefox shows the "Use custom settings for history" setting as an indication that at least one of the history and cookie settings is not the default to make you aware that changes were made.<br />
    If all History settings are default then the custom settings are hidden and you see "Firefox will: (Never) Remember History".<br />

  • My spry menu bar rolls down my web page as I scroll down page??

    Can anyone help??  Created spry menu bar in dreamweaver cs3, looks good but when I scroll down my web page the entire bar moves too.

    gideon007 wrote:
    I'm no expert here but it sounds like its fixed positioned.
    Agreed,
    If not, post a online url.

  • Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?

    Well i've made my website
    . Swimmerbuddy.com
    Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
    It seems like the drop down menus get cover by the main content underneath it..
    I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
    PLZ HELP ME.. THANKS
    THIS IS THE DWT THAT THE PAGE RUNS ON
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <link href="../CSS/main.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    a:link {
    color: #000;
    text-decoration: none;
    </style>
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    a:visited {
    color: #000;
    text-decoration: none;
    a:hover {
    text-decoration: none;
    color: #000;
    a:active {
    text-decoration: none;
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
        <div id="buyNow1">
          <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
        </div>
      </div>
      <div id="mainNav">
        <ul id="mainNavcontent" class="MenuBarHorizontal">
          <li><a href="../index.htm">Home</a>        </li>
          <li><a href="../swimmer.html">Swimmer Buddy</a></li>
          <li><a href="../order_now.html">Order Now</a>        </li>
          <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
            <ul>
              <li><a href="../photo_gallery.html">Photos</a></li>
              <li><a href="../video_gallery.html">Videos</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
            <ul>
              <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
              <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
              <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
              <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
            </ul>
          </li>
          <li><a href="../about.html">About Us</a></li>
          <li><a href="../contact.html">Contact Us</a></li>
        </ul>
      </div>
      <!-- TemplateBeginEditable name="mainContent" -->
      <div id="pageInfo">
        <div id="info_page">
          <p class="regionID">Region ID</p>
          <hr class="breaklinePageInfo" />
          <p class="breadcrum">&gt; <a href="../index.htm">Breadcrum </a></p>
        </div>
        <div id="mainContent">
          <div id="content">
            <p>Main Content Goes her</p>
          </div>
        </div>
      </div>
      <!-- TemplateEndEditable -->
      <!-- TemplateBeginEditable name="buynow2" -->
       <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
       <!-- TemplateEndEditable -->
      <div id="footer">
    <div id="footertext">
            <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
          </div>
        <div id="footerlinks">
            <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
    </div>
          </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    THIS IS THE MAIN.CSS
    @charset "utf-8";
    #networkicons {
    height: 50px;
    width: 200px;
    margin-top: 160px;
    margin-left: 15px;
    position: absolute;
    #wrapper {
    width: 933px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: left;
    position: relative;
    #mainNav {
    text-align: center;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: 934px;
    padding-bottom: 15px;
    clear: both;
    overflow: visible;
    #navwrapper {
    width: 935px;
    margin-right: auto;
    margin-left: auto;
    #mainContent {
    width: 910px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
    #content {
    width: 910px;
    position: relative;
    #wrapper #footer #footerlinks p .footerlinkspacing a {
    margin-right: 20px;
    #footer {
    width: 930px;
    background-color: #fff;
    position: relative;
    margin-top: 5px;
    text-align: center;
    color: #000;
    padding-bottom: 10px;
    margin-bottom: 15px;
    #header {
    width: 930px;
    height: 209px;
    background-image: url(../_images/header.jpg);
    background-repeat: no-repeat;
    #buyNow1 {
    height: 25px;
    width: 140px;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    background-repeat: no-repeat;
    color: #666;
    padding: 5px;
    position: absolute;
    top: 160px;
    right: 150px;
    .buyNow1 {
    color: #666;
    #wrapper #pageInfo #info_page .breadcrum {
    color: #003;
    #wrapper #pageInfo #info_page .breadcrum a {
    color: #003;
    html, body {
    margin: 0px;
    padding: 0px;
    #buyNow2 {
    height: 25px;
    width: 130px;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    position: relative;
    #wrapper #buyNow2 a img {
    position: absolute;
    top: -30px;
    right: 50px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    #pageInfo {
    width: 930px;
    background-image: url(../_images/pageinfobackground.jpg);
    background-repeat: repeat-x;
    background-color:#FFF;
    text-align: left;
    padding-bottom: 15px;
    margin-top: 18px;
    position: relative;
    overflow: visible;
    visibility: visible;
    #wrapper #mainNav #mainNavcontent {
    position: absolute;
    left: 0px;
    width: 930px;
    .regionID {
    font-size: 2em;
    font-weight: bold;
    color: #FFC;
    margin-top: 1em;
    margin-bottom: 0em;
    text-align: left;
    margin-left: 5px;
    .breaklinePageInfo {
    margin-top: 0.5em;
    color: #FAFEAB;
    .breadcrum {
    color: #003;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: underline;
    margin-top: -0.2em;
    margin-left: 15px;
    #breadcrum {
    font-weight: bold;
    color: #003;
    #footertext {
    width: 910px;
    font-size: 0.6em;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    #footerlinks {
    width: 930px;
    font-size: 0.7em;
    font-weight: bold;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #000;
    position: relative;
    margin-top: 10px;
    margin-bottom: 5px;
    .footertextclass {
    color: #000;
    .footerlinkspacing {
    margin-top: -0.5em;
    color: black;
    height: 10px;
    font-style: normal;
    line-height: normal;
    font-variant: normal;
    letter-spacing: normal;
    p {
    margin: 0px;
    padding: 0px;
    body {
    text-align: center;
    margin-top: 5px;
    background-color: #073e78;
    background-image: url(../_images/background.jpg);
    background-repeat: repeat-x;
    background-attachment: scroll;
    font-size: 100%;
    THIS IS THE dropdown menu.css
    @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
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 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;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: static;
    text-align: center;
    cursor: pointer;
    width: 132.8px;
    float: left;
    overflow: visible;
    visibility: visible;
    /* 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: 132.8px;
    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: 8.2em;
    /* 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;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: #333;
    color: #FFF;
    /* 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: #333;
    text-decoration: none;
    background-image: url(../_images/bar-top.png);
    background-repeat: no-repeat;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #003;
    background-image: url(../_images/bar-Bottom.png);
    /* 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
    color: #003;
    background-image: url(../_images/bar-Bottom.png);
    background-position: bottom;
    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(../_images/bar-topsub.png);
    background-repeat: no-repeat;
    background-position: right top;
    /* 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(SpryMenuBarRight.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 a.MenuBarItemSubmenuHover
    background-image: url(../_images/bar-topsubhover.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    /* 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(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    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
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
      display: inline;
      f\loat: left;
      background: #FFF;

    Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
    .. The Drop down menu is not behaving well...
    As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

  • Question: My spry menu bar is not displaying correctly in Dreamweaver

    Hello,
    I am  new to Dreamweaver CS5, so coding isn't my area of expertise. My problem with my spry menu bar is that it does not display the tabs on the menu bar correctly. When I try to apply new changes to the CSS of the horizontal menu bar, half of the tabs will change and the other half will not. Also, I am unable to drag and move the menu bar itself around, a function that I was once able to do before. At times, only one tab of the menu bar will display itself, without any of the other tabs as well.
    I have a hunch that my problems stem from some coding errors in the SpryMenuBarHorizontal.css, and possibly in the SpryMenuBar.js. On the CSS Styles panel, my SpryMenuBarHorizontal.CSS list reads as follows:
    I also have a hunch that something about this line-up is also incorrect, but I don't exactly know what the problem is.
    Here is what my coding for my SpryMenuBarHorizontal.css looks like right now:
    @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
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        text-align: center;
    /* 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: 8em;
        float: left;
        left: 10;
        top: 10;
        height: 10;
    /* 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: 8.2em;
        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: 8.2em;
    /* 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;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
        text-align: left;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #000;
        padding: 0.5em 0.75em;
        color: #FFF;
        text-decoration: none;
        font-family: Futura;
        float: none;
    /* 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: #C00;
        color: #FFF;
    /* 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: #C00;
        color: #FFF;
    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(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        text-align: center;
    /* 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(SpryMenuBarRight.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 a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarDownHover.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(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    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
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
        display: block;
        f\loat: left;
        background: #FFF;
    And here is what my SpryMenuBar.js coding looks like right now too:
    SpryMenuBar.js
    This file handles the JavaScript for Spry Menu Bar.  You should have no need
    to edit this file.  Some highlights of the MenuBar object is that timers are
    used to keep submenus from showing up until the user has hovered over the parent
    menu item for some time, as well as a timer for when they leave a submenu to keep
    showing that submenu until the timer fires.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.BrowserSniff = function()
        var b = navigator.appName.toString();
        var up = navigator.platform.toString();
        var ua = navigator.userAgent.toString();
        this.mozilla = this.ie = this.opera = this.safari = false;
        var re_opera = /Opera.([0-9\.]*)/i;
        var re_msie = /MSIE.([0-9\.]*)/i;
        var re_gecko = /gecko/i;
        var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
        var r = false;
        if ( (r = ua.match(re_opera))) {
            this.opera = true;
            this.version = parseFloat(r[1]);
        } else if ( (r = ua.match(re_msie))) {
            this.ie = true;
            this.version = parseFloat(r[1]);
        } else if ( (r = ua.match(re_safari))) {
            this.safari = true;
            this.version = parseFloat(r[2]);
        } else if (ua.match(re_gecko)) {
            var re_gecko_version = /rv:\s*([0-9\.]+)/i;
            r = ua.match(re_gecko_version);
            this.mozilla = true;
            this.version = parseFloat(r[1]);
        this.windows = this.mac = this.linux = false;
        this.Platform = ua.match(/windows/i) ? "windows" :
                        (ua.match(/linux/i) ? "linux" :
                        (ua.match(/mac/i) ? "mac" :
                        ua.match(/unix/i)? "unix" : "unknown"));
        this[this.Platform] = true;
        this.v = this.version;
        if (this.safari && this.mac && this.mozilla) {
            this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a menu
    Spry.Widget.MenuBar = function(element, opts)
        this.init(element, opts);
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
        this.element = this.getElement(element);
        // represents the current (sub)menu we are operating on
        this.currMenu = null;
        this.showDelay = 250;
        this.hideDelay = 600;
        if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        if (Spry.is.ie && Spry.is.version < 7){
            try {
                document.execCommand("BackgroundImageCache", false, true);
            } catch(err) {}
        this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
        this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
        this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
        this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
        this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
        this.hoverClass = 'MenuBarItemHover';
        this.subHoverClass = 'MenuBarItemSubmenuHover';
        this.subVisibleClass ='MenuBarSubmenuVisible';
        this.hasSubClass = 'MenuBarItemSubmenu';
        this.activeClass = 'MenuBarActive';
        this.isieClass = 'MenuBarItemIE';
        this.verticalClass = 'MenuBarVertical';
        this.horizontalClass = 'MenuBarHorizontal';
        this.enableKeyboardNavigation = true;
        this.hasFocus = false;
        // load hover images now
        if(opts)
            for(var k in opts)
                if (typeof this[k] == 'undefined')
                    var rollover = new Image;
                    rollover.src = opts[k];
            Spry.Widget.MenuBar.setOptions(this, opts);
        // safari doesn't support tabindex
        if (Spry.is.safari)
            this.enableKeyboardNavigation = false;
        if(this.element)
            this.currMenu = this.element;
            var items = this.element.getElementsByTagName('li');
            for(var i=0; i<items.length; i++)
                if (i > 0 && this.enableKeyboardNavigation)
                    items[i].getElementsByTagName('a')[0].tabIndex='-1';
                this.initialize(items[i], element);
                if(Spry.is.ie)
                    this.addClassName(items[i], this.isieClass);
                    items[i].style.position = "static";
            if (this.enableKeyboardNavigation)
                var self = this;
                this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
            if(Spry.is.ie)
                if(this.hasClassName(this.element, this.verticalClass))
                    this.element.style.position = "relative";
                var linkitems = this.element.getElementsByTagName('a');
                for(var i=0; i<linkitems.length; i++)
                    linkitems[i].style.position = "relative";
    Spry.Widget.MenuBar.KEY_ESC = 27;
    Spry.Widget.MenuBar.KEY_UP = 38;
    Spry.Widget.MenuBar.KEY_DOWN = 40;
    Spry.Widget.MenuBar.KEY_LEFT = 37;
    Spry.Widget.MenuBar.KEY_RIGHT = 39;
    Spry.Widget.MenuBar.prototype.getElement = function(ele)
        if (ele && typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
        if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
            return false;
        return true;
    Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
        if (!ele || !className || this.hasClassName(ele, className))
            return;
        ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
        if (!ele || !className || !this.hasClassName(ele, className))
            return;
        ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    // addEventListener for Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent('on' + eventType, handler);
        catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
    Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
        var layer = document.createElement('iframe');
        layer.tabIndex = '-1';
        layer.src = 'javascript:""';
        layer.frameBorder = '0';
        layer.scrolling = 'no';
        menu.parentNode.appendChild(layer);
        layer.style.left = menu.offsetLeft + 'px';
        layer.style.top = menu.offsetTop + 'px';
        layer.style.width = menu.offsetWidth + 'px';
        layer.style.height = menu.offsetHeight + 'px';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
        var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
        while(layers.length > 0)
            layers[0].parentNode.removeChild(layers[0]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (<ul> tag)
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
        var menus = root.getElementsByTagName('ul');
        for(var i=0; i<menus.length; i++)
            this.hideSubmenu(menus[i]);
        this.removeClassName(this.element, this.activeClass);
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
        if(this.currMenu)
            this.clearMenus(this.currMenu);
            this.currMenu = null;
        if(menu)
            this.addClassName(menu, this.subVisibleClass);
            if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
                if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
                    menu.style.top = menu.parentNode.offsetTop + 'px';
            if(Spry.is.ie && Spry.is.version < 7)
                this.createIframeLayer(menu);
        this.addClassName(this.element, this.activeClass);
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
        if(menu)
            this.removeClassName(menu, this.subVisibleClass);
            if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
                menu.style.top = '';
                menu.style.left = '';
            if(Spry.is.ie && Spry.is.version < 7)
                this.removeIframeLayer(menu);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        if(menu)
            this.addClassName(link, this.hasSubClass);
        if(!Spry.is.ie)
            // define a simple function that comes standard in IE to determine
            // if a node is within another node
            listitem.contains = function(testNode)
                // this refers to the list item
                if(testNode == null)
                    return false;
                if(testNode == this)
                    return true;
                else
                    return this.contains(testNode.parentNode);
        // need to save this for scope further down
        var self = this;
        this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
        this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
        if (this.enableKeyboardNavigation)
            this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
            this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
        this.lastOpen = listitem.getElementsByTagName('a')[0];
        this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
        this.hasFocus = true;
    Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
        this.clearSelection(listitem);
    Spry.Widget.MenuBar.prototype.clearSelection = function(el){
        //search any intersection with the current open element
        if (!this.lastOpen)
            return;
        if (el)
            el = el.getElementsByTagName('a')[0];
            // check children
            var item = this.lastOpen;
            while (item != this.element)
                var tmp = el;
                while (tmp != this.element)
                    if (tmp == item)
                        return;
                    try{
                        tmp = tmp.parentNode;
                    }catch(err){break;}
                item = item.parentNode;
        var item = this.lastOpen;
        while (item != this.element)
            this.hideSubmenu(item.parentNode);
            var link = item.getElementsByTagName('a')[0];
            this.removeClassName(link, this.hoverClass);
            this.removeClassName(link, this.subHoverClass);
            item = item.parentNode;
        this.lastOpen = false;
    Spry.Widget.MenuBar.prototype.keyDown = function (e)
        if (!this.hasFocus)
            return;
        if (!this.lastOpen)
            this.hasFocus = false;
            return;
        var e = e|| event;
        var listitem = this.lastOpen.parentNode;
        var link = this.lastOpen;
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
        if (!opts[3])
            opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
        var found = 0;
        switch (e.keyCode){
            case this.upKeyCode:
                found = this.getElementForKey(opts, 'y', 1);
                break;
            case this.downKeyCode:
                found = this.getElementForKey(opts, 'y', -1);
                break;
            case this.leftKeyCode:
                found = this.getElementForKey(opts, 'x', 1);
                break;
            case this.rightKeyCode:
                found = this.getElementForKey(opts, 'x', -1);
                break;
            case this.escKeyCode:
            case 9:
                this.clearSelection();
                this.hasFocus = false;
            default: return;
        switch (found)
            case 0: return;
            case 1:
                //subopts
                this.mouseOver(listitem, e);
                break;
            case 2:
                //parent
                this.mouseOut(opts[2], e);
                break;
            case 3:
            case 4:
                // left - right
                this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
                break;
        var link = opts[found].getElementsByTagName('a')[0];
        if (opts[found].nodeName.toLowerCase() == 'ul')
            opts[found] = opts[found].getElementsByTagName('li')[0];
        this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
        this.lastOpen = link;
        opts[found].getElementsByTagName('a')[0].focus();
            //stop further event handling by the browser
        return Spry.Widget.MenuBar.stopPropagation(e);
    Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if (this.enableKeyboardNavigation)
            this.clearSelection(listitem);
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            return;
        if (listitem.closetime)
            clearTimeout(listitem.closetime);
        if(this.currMenu == listitem)
            this.currMenu = null;
        // move the focus too
        if (this.hasFocus)
            link.focus();
        // show menu highlighting
        this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
        this.lastOpen = link;
        if(menu && !this.hasClassName(menu, this.subHoverClass))
            var self = this;
            listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
    Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            return;
        var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
        if(!listitem.contains(related))
            if (listitem.opentime)
                clearTimeout(listitem.opentime);
            this.currMenu = listitem;
            // remove menu highlighting
            this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
            if(menu)
                var self = this;
                listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
            if (this.hasFocus)
                link.blur();
    Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
        var child = element[sibling];
        while (child && child.nodeName.toLowerCase() !='li')
            child = child[sibling];
        return child;
    Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
        var found = 0;
        var rect = Spry.Widget.MenuBar.getPosition;
        var ref = rect(els[found]);
        var hideSubmenu = false;
        //make the subelement visible to compute the position
        if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
            els[1].style.visibility = 'hidden';
            this.showSubmenu(els[1]);
            hideSubmenu = true;
        var isVert = this.hasClassName(this.element, this.verticalClass);
        var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
        for (var i = 1; i < els.length; i++){
            //when navigating on the y axis in vertical menus, ignore children and parents
            if(prop=='y' && isVert && (i==1 || i==2))
                continue;
            //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
            if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
                continue;
            if (els[i])
                var tmp = rect(els[i]);
                if ( (dir * tmp[prop]) < (dir * ref[prop]))
                    ref = tmp;
                    found = i;
        // hide back the submenu
        if (els[1] && hideSubmenu){
            this.hideSubmenu(els[1]);
            els[1].style.visibility =  '';
        return found;
    Spry.Widget.MenuBar.camelize = function(str)
        if (str.indexOf('-') == -1){
            return str;   
        var oStringList = str.split('-');
        var isFirstEntry = true;
        var camelizedString = '';
        for(var i=0; i < oStringList.length; i++)
            if(oStringList[i].length>0)
                if(isFirstEntry)
                    camelizedString = oStringList[i];
                    isFirstEntry = false;
                else
                    var s = oStringList[i];
                    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
        return camelizedString;
    Spry.Widget.MenuBar.getStyleProp = function(element, prop)
        var value;
        try
            if (element.style)
                value = element.style[Spry.Widget.MenuBar.camelize(prop)];
            if (!value)
                if (document.defaultView && document.defaultView.getComputedStyle)
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(prop) : null;
                else if (element.currentStyle)
                        value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
        catch (e) {}
        return value == 'auto' ? null : value;
    Spry.Widget.MenuBar.getIntProp = function(element, prop)
        var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
        if (isNaN(a))
            return 0;
        return a;
    Spry.Widget.MenuBar.getPosition = function(el, doc)
        doc = doc || document;
        if (typeof(el) == 'string') {
            el = doc.getElementById(el);
        if (!el) {
            return false;
        if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
            //element must be visible to have a box
            return false;
        var ret = {x:0, y:0};
        var parent = null;
        var box;
        if (el.getBoundingClientRect) { // IE
            box = el.getBoundingClientRect();
            var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
            var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
            ret.x = box.left + scrollLeft;
            ret.y = box.top + scrollTop;
        } else if (doc.getBoxObjectFor) { // gecko
            box = doc.getBoxObjectFor(el);
            ret.x = box.x;
            ret.y = box.y;
        } else { // safari/opera
            ret.x = el.offsetLeft;
            ret.y = el.offsetTop;
            parent = el.offsetParent;
            if (parent != el) {
                while (parent) {
                    ret.x += parent.offsetLeft;
                    ret.y += parent.offsetTop;
                    parent = parent.offsetParent;
            // opera & (safari absolute) incorrectly account for body offsetTop
            if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
                ret.y -= doc.body.offsetTop;
        if (el.parentNode)
                parent = el.parentNode;
        else
            parent = null;
        if (parent.nodeName){
            var cas = parent.nodeName.toUpperCase();
            while (parent && cas != 'BODY' && cas != 'HTML') {
                cas = parent.nodeName.toUpperCase();
                ret.x -= parent.scrollLeft;
                ret.y -= parent.scrollTop;
                if (parent.parentNode)
                    parent = parent.parentNode;
                else
                    parent = null;
        return ret;
    Spry.Widget.MenuBar.stopPropagation = function(ev)
        if (ev.stopPropagation)
            ev.stopPropagation();
        else
            ev.cancelBubble = true;
        if (ev.preventDefault)
            ev.preventDefault();
        else
            ev.returnValue = false;
    Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
        if (!optionsObj)
            return;
        for (var optionName in optionsObj)
            if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                continue;
            obj[optionName] = optionsObj[optionName];
    })(); // EndSpryComponent
    If anyone could possibly steer me on the right direction with this, I'd be very grateful! I've been struggling with this for about a month now and I feel like I may have only made the situation worse.
    I'm not sure if I have to keep making a new spry assets folder in my website or not or if I have to drag and drop the spry assets into the root folder. I have restarted my website over at least a dozen times by now. I have tried changing folders, dragging and dropping various spry assets folders everywhere and I have also uninstalled and reinstalled my copy of Dreamweaver CS5 in the hopes of getting my spry horizontal menu bar to act normal. I am completely new at Dreamweaver and I really, really need some help with this.
    Thanks!

    I haven't been able to get my site posted up yet. Here is a link to it anyway:andrearosales.com
    I will be working on connecting my files up to my server. At the moment, here are some screen shots of some messages that I am getting when I am saving my file.
    I'm not sure what to make of these messages. I tried to put a new spry horizontal menu bar on my main page, and when it appeared, it displayed as a spry vertical menu bar.
    Here is a picture of what it looks like:
    I"m going to refer to the links that were suggested to me though. I'm not sure if pictures of the code will help to solve my problem. I'm going to try again to connect my files to my server though.

  • Spry Menu Bar Colors and Pictures in Dreamweaver

    I'm having some trouble changing the color of the spry menu
    bars that I created in Dreamweaver. Whenever I preview them in a
    browser they show up as grey with black text. What I want them to
    show up as is blue with white text before the mouse goes over them
    and highlights them. When the mouse goes over them I want them to
    still be blue with white text and also my drop down menu options as
    well.
    What would be the fastest and easiest way to do this and if
    there is what css code is required for me to change? I'm unfamiliar
    with how css code works.
    I'm also having some problems with copying and pasting
    pictures and editing them too. what software can i download that is
    free that i can use to edit my pictures.
    I have the trial version mind you and I'm trying to get this
    finished as fast as I can.

    > What would be the fastest and easiest way to do this and
    if there is what
    > css
    > code is required for me to change?
    Bring up your page and adjust the CSS in the
    SpryMenuHorizontal.css or
    SpryMenuVertical.css page that is attached. All the color
    values are in
    there.
    >I'm unfamiliar with how css code works.
    You need to change this. Without a thorough working knowledge
    of HTML and
    CSS (at the very least), you will never have great success in
    either
    Dreamweaver or web design. I first learned web design using
    Notepad, typing
    every single tag, and I am soo grateful now that I had that
    solid coding
    experience .. without it, this program would be very hard to
    master.
    > I'm also having some problems with copying and pasting
    pictures and
    > editing
    > them too. what software can i download that is free that
    i can use to edit
    > my
    > pictures.
    Free? I'm not sure any more .. you can use either the 30 day
    trial of
    Fireworks or Photoshop (Fireworks would probably be easier to
    pick up) but
    if you're going to do a lot of this, you need to get some
    good tools and
    learn them well.
    Nancy Gill
    Adobe Community Expert
    Author: Dreamweaver 8 e-book for the DMX Zone
    Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
    2003)
    Technical Editor: Dreamweaver CS3: The Missing Manual,
    DMX 2004: The Complete Reference, DMX 2004: A Beginner's
    Guide
    Mastering Macromedia Contribute
    Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
    Web Development

  • Spry Menu Bar acting crazy

    I am not a coder and have used DW in the past to create relatively simple websites. I have a client who needs a horizontal nav bar with one of the buttons prompting a drop-down menu. First tried this using DM8 and then discovered the drop down menu behavior feature doesn't work in a template. So upgraded to DW CS5. Started to work with the Spry menu bar feature and was learning how to change font color, background color, hover color, add menu items, etc.... I noticed that whenever I tried inserted a new Spry menu bar it had the attributes of the most recent menu bar I created.
    After working with the CSS menu I noticed that there seemed to be a division in each menu bar cell -- a small rectangular shape that I couldn't highlight but would affect how the bar looked in a browser. It almost looked like cell divisions in a table. The bar is horizontal with the text centered LtoR and top to bottom, but there was more space at the bottom of the menu bar due to this added "bar". Then when I inserted a new Spry menu I could barely see it. The menu, which included the default 4 fields/ buttoms was literally about 1" wide on my screen. I tried keying in a new pixel width and nothing would help until I got up to 900px.
    To make an already long story short, the Spry feature is completely screwed up. Is there a preference I can trash to at least re-set it to how it was before I somehow screwed it up?
    Any tips would be great.

    You can delete the Spry support files from your Files Panel, thus eliminating the problem code. 
    Spry Menu 2.0 files use a different naming convention. You edit the menu styles inside Widget Browser's visual editor then save/export files to your local site folder.  
    The support files for Spry Menu 2.0 (aka Spry UI-1.7) look like this:
    <link type='text/css' href='Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
    <script type='text/javascript' src='Spry-UI-1.7/includes/SpryMenu.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js'></script>
    Nancy O.

  • Spry Menu Bar CS4

    I have used the horizontal Spry Menu Bar for the navigation for my website.  I used a tiered system because I needed two levels of drop downs for the menu.  When we loaded the site to the web yesterday it worked fine on Mozilla but there was a glitch on IE.  Instead of dropping down in a stacking order, the submenus would be lined up horizontally along the screen in a long line.  I'm not sure if I need to edit the .css file for the spry menu bar, or the .js file.  Any help would be greatly appreciated!
    Note:  I've attached the javascript code AND the css code for reference.

    I was just struggling with this, too. I think I have it fixed -- it's looking good in IE7 and IE8 (my standalone of IE6 has conflicts and refuses to open this morning).
    You need to update the CSS. Give this a try.
    ul.MenuBarHorizontal ul li
        clear:left;
        float: none;
        background-color: transparent;
         color: #878189;
    Take a look -- the menus should be displaying vertically in a list in IE, but you'll see the background color isn't extending to fill the entire list box.
    So add the background-color property with the correct color to the ul.MenuBarHorizontal ul entry.
    I haven't gone through your code line by line, but those two changes fixed it for me. Let me know if it works.

Maybe you are looking for

  • XML to ABAP - where the ABAP mapping?

    Dear experts, I have to do an ABAP mapping which I have never done before. I found blog: /people/r.eijpe/blog/2005/11/21/xml-dom-processing-in-abap-part-ii--convert-an-xml-file-into-an-abap-table-using-sap-dom-approach which shows the ABAP code. I us

  • Monitor Display Size - pixels

    I downloaded a royalty free image which is 732(w) x 900(h) 72dpi. However, In the browser, or in some of the default 'image' programs I have in my computer, the image opens in about 1/2 that size. Because if i did the math at 72dpi, the picture shoul

  • Why can't I access my button click method??

    I have had this problem a couple of times now and I do not understand what is happening. Here is what is happening. 1) I have a login menu screen - user logs in OK. 2) User directed to another screen where user selects option 3) User directed to a th

  • Integration Service will not start

    When I try to start the SAP Business One Integration Service will not start. Windows says it could not start the service... see the System Event log...if this is a non-Windows service, contact the service vendor. This is what the System Event error i

  • Opening a file in custom FileDialog (VERY VERY URGENT)

    hi everybody, I have a problem and stuck. I have developed a MDI application that provides all function like open saved files, create new, edit and lots of other. It only opens, save ,edit etc the graphical diagrams inside JInternalFrames. I have an