Menu Bar Not Displaying Correctly

Hi,
I am building a website locally and have developed the menu bar in Fireworks. When I preview the page in IE I get a strange strip running across the top of the bar, but it displays fine in Firefox. I have posted this in the Fireworks discussion without much luck, can anyone help?

Thanks for the response, but as mentioned I am still building the page locally, there is no URL yet so I can't post a link.
When I import the Fireworks HTML, the top line of code is:
  <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1001">
I wonder if the display field needs to be different?

Similar Messages

  • Horizontal Menu Bar - Not displaying correctly in Internet Explorer

    My issues are occuring in Internet Explorer 8 and 7, haven't tested earlier versions.
    I am currently using DW CS5, Spry 1.6.1
    The website (not yet complete) is at www3.sympatico.ca/mitchell.richard/
    The menu bar as viewed in Firefox is correct. In Internet Explorer the menu bar is left justified, hides visited links, and lists horizontal menu items in reverse order.
    I work for a Women's Shelter in Canada, as the Information Systems Manager. We don't have the funds to hire someone to build a website and it was decided and I quote "You know computers, you can buld the website". I couldn't get them to understand the analogy that just because a Neurosurgeon can use a scalpel he isn't a Cardiothoracic Surgeon... needless to say, I am floudering on this menu bar. Any help would be greatly appreciated.
    Below is the source for my menubar
    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: 12pt;
        cursor: default;
        width: inherit;
        font: calibri;
        font-family: Calibri;
        font-weight: bold;
        background-color: #4F91CD;
        /* [disabled]height: 27px; */
        /* [disabled]border-bottom: 1px solid #A7C9E5; */
        /* [disabled]border-top: 1px solid #A7C9E5; */
    /* 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: 6
    .em;
        float: right;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #4F91CD;
        padding: 0.2em 0.75em;
        color: #FFF;
        text-decoration: none;
        border-bottom: 1px solid #A7C9E5;
        border-top: 1px solid #A7C9E5;
    /* 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: #A7C9E5;
        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: #A7C9E5;
        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
        /* [disabled]background-image: url(SpryMenuBarDown.gif); */
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* 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
        /* [disabled]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
        /* [disabled]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
        /* [disabled]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 ifram=e
        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;
    HTML
      <tr>
        <td colspan="10" class="navbarrepeat"><ul id="navbar" class="MenuBarHorizontal">
          <li><a href="contact_us.html">Contact Us</a>        </li>
          <li><a href="helpful_links.html" class="MenuBarItemSubmenu">Resources</a>
            <ul>
              <li><a href="helpful_links.html">Helpful Links</a></li>
              <li><a href="community_agencies.html">Community Agencies</a></li>
              <li><a href="of_interest.html">Of Interest</a></li>
    </ul>
          </li>
          <li><a href="checklist.html" class="MenuBarItemSubmenu">Safety</a>
            <ul>
              <li><a href="safety_checklist.html">Safety Checklist</a></li>
              <li><a href="things_to_bring.html">Things to Bring</a></li>
              <li><a href="child_safety_plan.html">Child Safety Plan</a></li>
    </ul>
          </li>
          <li><a href="signs.html" class="MenuBarItemSubmenu">Abuse</a>
            <ul>
              <li><a href="what_is_abuse.html">What is Abuse?</a></li>
              <li><a href="signs.html">Signs of Abuse</a></li>
              <li><a href="characteristics.html">Characteristics</a></li>
              <li><a href="why_women_stay.html">Why Women Stay</a></li>
              <li><a href="donate.html">Survivors Speak</a></li>
            </ul>
          </li>
          <li><a href="donate.html" class="MenuBarItemSubmenu">Support Us</a>
            <ul>
              <li><a href="donate.html">Donate</a></li>
              <li><a href="events.html">Events</a></li>
              <li><a href="volunteering.html">Volunteering</a></li>
              <li><a href="statistics.html">Statistics</a></li>
    </ul>
          </li>
          <li><a href="join_us.html">Join Us</a>        </li>
          <li><a href="our_story.html" class="MenuBarItemSubmenu">About Us</a>
            <ul>
              <li><a href="residential.html">Our Services</a></li>
              <li><a href="our_mission.html">Our Mission</a></li>
              <li><a href="our_story.html">Our Story</a></li>
              <li><a href="board_of_directors.html">Board of Directors</a></li>
            </ul>
          </li>
        </ul></td>
        <td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
      </tr>

    /* 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: 6
    .em;
         float: right;
    The red coloured line causes your menu to be displayed the wrong way round in FF. IE shows the menu as you have listed it with Contact Us as the first item.
    Advice:
    change the float to left so that the listed items start on the left hand side
    change the listed items in the order that you want them to appear.

  • Navigation bar not displaying correctly in IE6

    Hello,
    I'm having trouble getting my navigation bar to display correctly in IE6!!! I've tried using the zoom: 1 IECC for #header, #header li a etc but can't seem to get it to display in the correct place. I'm fairly new to CSS (that's probably obvious!) and have been working through a tutorial to get this far but unfortunately the design you want never quite matches the tutorial!
    http://www.lewistest.webatu.com/
    Any help or any other comments about my coding or design would be greatly appreciated!
    Thanks,
    Tracie

    Oops sorry, I've used them before and forgot they did that soon after a site was set-up! My other site is hosted by them with no problem.
    If you are able to see the site now the link is still http://www.lewistest.webatu.com/ ... failing that I will post source code etc tomorrow

  • On windows 7 only, ie9 and firefox 4 spry bar not displaying correctly?

    This website www.colonialstock.com does not display the spry menubar correctly.  I need it to go all the way to the right.  But when I do a view on IE8 or do the compatibility view on IE9 (which is the same as IE8) it brings the bar too far, making it fall below where it is.  I need it to work on both browsers.  The same is on firefox 4 and earlier versions.  I am guessing this is just a windows 7 issue in all.  Also on firefox when i hover on this tab issuer services> annual meeting & proxy the sub sub menu appears farther down than it should it works fine on all ie8/9 versions.  Please let me know if you have any solutions.

    See here http://forums.adobe.com/message/4002145#4002145
    Gramps

  • Menu bar not displaying inline with logo (Spry menu troubles - Extra Credit!)

    Coding Brothers and Sisters!
    Hope you all are well - would anyone please assist me to display inline the logo and menu bar at the following page?
         http://gratefulcreative.com/Andre_Madiz/index.html
    Superbonus, Adobe All-star points for help with my Spry Menu Bar, which is not showing submenus. I get an error message saying the following:
         This document contains Javascript code for a widget that no longer exists. If you don't remove the code, the browser might display Javascript errors when loading the page. Would you like Dreamweaver to find all the
         instances of the code for you?
         Widget: var Menu Bar 1 = New.Spry.Widget.MenuBar ("MenuBar1"; {imgdown:"SpryAssets/SpryMenuBarDownHover.gif",imgRight:"SpryAssets/SpryMenuBarRightHover .gif"});
    Thank you as always!
    Ken D
    Creative Director
    Grateful Creative
    www.gratefulcreative.com

    Use CSS floats.  Posted here with inline styles for expediency.  Ideally, you should set-up some re-usable classes for floats & clearing in your external style sheet.
    <div style="float:left; width:250px">
    <a href="http://www.andremadizmma.com"><img src="images/Bulldog_logo3.png" border="0"></a>
    </div>
    More on Floats:
    http://css.maxdesign.com.au/floatutorial/
    (='.'=)
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • Menu bar not displaying in browser preview.

    After inserting my menu bar it doesn't display when I preview it in my browser. I have a rectangle sectioned for my main navigation menu and the menu bar sits on top of it...could this be causing it to not be seen? Also, it showed only once after pinning it...but that isn't what I want because when the page scrolls up and down the menu sits stationary...but it allows it to show??
    Anyone have this issue or have a fix?
    Thanks,
    Lee

    <header> and <footer> are html5 semantic tags. Old non-html5 browsers (like IE8) don't know how to handle them without a little help.
    Add this code to your <head>
    <!--[if lt IE 9]>
         <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    Or better yet, download the .js file and add it to your site, then link to it, that way you won't depend on third party servers keeping the file in the same location...
    http://code.google.com/p/html5shiv/

  • Menu bar not displaying in Internet Explorer 8

    I recently created the webpage http://sterlingfamilyfarm.com/index.html in Dreamweaver CC.
    I tested the site with http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/ and all seemed good.
    But the menu bar is not displaying in IE8... it's displaying as a bulleted list instead.
    Also the footer is not displaying properly (not centered, no background color).
    Any help would be greatly appreciated.
    Thank you!
    Patrick

    <header> and <footer> are html5 semantic tags. Old non-html5 browsers (like IE8) don't know how to handle them without a little help.
    Add this code to your <head>
    <!--[if lt IE 9]>
         <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    Or better yet, download the .js file and add it to your site, then link to it, that way you won't depend on third party servers keeping the file in the same location...
    http://code.google.com/p/html5shiv/

  • Horizontal Menu Bar not formatting correctly in IE

    I am trying to get my menu bar to properly format in IE. It
    works fine in Opera, Firefox, and Safari. What I am having problems
    with is with how the sub menus pop up. In IE they show up above the
    menu bar instead of below the menu bar. Any help would be
    appreciated. My web page is www.artsbeercans.com Thanks!

    OK, I went ahead and posted it live, even though it's not how I want it.
    I think if I could make the horizontal menu boxes smaller, they could
    all fit across - is there anyway to make each box fit the word that's
    in it, instead of them all being 160 px?  That might make room for
    them all to fit across.....
    Because can you see that the "Other" is now on the second row, and
    pushes over the vertical menu box?
    www.itsaboutourkids.org
    thanks!!

  • Horizontal Menu Bar not displaying when published as it views in live view or preview

    I am working on putting together our site and haven't used Dreamweaver in years so very rusty.  I have a horizontal menu bar that is working properly in "live view" and in "preview" mode but when I publish the submenus are not working. 
    You can view the site at www.pulsecc.org
    Any help will be greatly appreciated.

    Thank you so much! That's a little frustrating how long I pulled my hair out trying to figure something this simple out!
    Thanks again!

  • Menu bar not displaying properly

    On boot-up I am have a recurring problem. About 80% of the time I login to my account (1 user, auto logs in on startup), several menu bar icons do not load. This includes 3rd party icons and 2nd party icons (built-in). It's difficult to compare the menu bar with everything loaded properly and when some things are missing because I can't look at both at once =/ . The noticeable absences include lack of battery status icon, wifi connectivity icon, and iStat menus CPU usage. Even when I go to System Preferences to make sure that it says "Show ____ status in menu bar" is checked, and when I uncheck and recheck it, nothing happens. Oftentimes I just have to log out and log back in, however it usually doesn't work. Any ideas as to what might be causing this.

    The menu bar extras are handled by SystemUIServer, which evidently is having a problem with something you have installed. While it seems to be more robust in Leopard than it was in earlier versions of Mac OS, it can still choke up on third party things (it used to choke even on some Apple menu bar extras). First take a look in your startup items, and see what, if anything, is there and loading menu bar extras, make a note of what it is so you can add it back later, and delete it.
    Then try deleting the preference list for SystemUIServer:
    /Users/yourname/Library/Preferences/com.apple.systemuiserver.plist
    and also the cache file for it:
    /Users/yourname/Library/Preferences/ByHost/com.apple.systemuiserver.0017f20dca84 .plist
    Log out and back in. Now go to the Apple items and re-enable the ones you need. Run for awhile and restart. Next add ONE of the third-party items back and see how things go. Each time you restart put another item back. You ought to eventually figure out which one is causing the problem. You'll have to learn to live without it, or check to see if the program that has it has an updater for Leopard.
    Francine
    Francine
    Schwieder

  • Url bar not displaying correctly on forwarded domain

    I found a problem.... on domain forwarded site - the right side of the url does not update correctly...
    the REAL site is:
    mysite.com - but we use a 2nd domain - mysite2.com that uses forwarding (w masking) to the 1st - mysite.com (so they are both the same real pages)
    (the owner wants it this way)
    NO PROBLEM when I use = mysite.com
    mysite.com/dir1/dir2/index.php = ALL GOOD - urls display correctly...
    but this problem appears when I use mysite2.com (forwarding)
    mysite2.com/dir1/dir2/index.php - does NOT UPDATE CORRECTLY
    pages go the the right place - but url stays here (last place typed) - mysite2.com/dir1/dir2/index.php
    Q: any way to fix the 2nd forwarded domain with a master bit of code of something?
    a href links are simple like    -     update.php (not absolute refs)

    Hi Murray - thanks for your help,
    1 - the master site is:
    http://deboisproductions.com
    it has all the links showing properly as you go to varied pages
    2 - this is a domain forward with masking (from godaddy goes to #1 deboisproductions.com)
    http://deboisentertainment.com/
    it has all the links NOT showing properly as you go to varied pages - it stays on deboisentertainment.com

  • Hover menu buttons not displaying correctly in Firefox

    Hello,
    I have a small problem with firefox. It does not seem to
    display the images correctly. In firefox the buttons are pushed
    down and you can only see part of the image. In IE6 and IE7 it is
    displayed fine.
    here is the URL so you can take a look at it:
    Page
    Does anyone know what the problem might be?

    Just drop a zoom:100% style on the link, and IE will get it
    right.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "TC2112" <[email protected]> wrote in
    message
    news:fh2nt4$4u8$[email protected]..
    > Hello,
    >
    > The problem is with IE, not Firefox.
    > The content of your menu link tags is a clear gif image
    that is the same
    > height as the background images applied to the link tag
    that change on
    > mouseover.
    > Even though it looks like you want it to in IE, IE is
    actually rendering
    > your
    > code incorrectly.
    > Firefox is rendering your code exactly as it should.
    >
    > Your background images are applied by CSS to the link,
    not the image
    > within.
    > In standards compliant browsers like Firefox, the height
    of link
    > attributes
    > such as background and border are determined by the font
    size or line
    > height
    > that applies to that link, even if there is no text in
    the link.
    > As a test, you can add font-size:38px (the height of
    your background
    > images)
    > to "table.menu" in your CSS and you'll see your entire
    link background
    > images
    > in FF.
    > IE incorrectly streches the link background to the
    height of the image
    > within
    > within the link.
    > IE does the same thing to borders if they are applied to
    just the "a" tag
    > and
    > not to "a img" in the CSS.
    >
    > A quick fix:
    >
    > table.menu { width:186px; margin-top:6px;
    > line-height: 38px; }
    >
    > A better fix and some great information:
    >
    >
    >
    >
    http://projectseven.com/tutorials/css/uberlinks/index.htm
    >
    > and:
    >
    >
    http://css.maxdesign.com.au/listamatic/
    >
    > Hope that helps,
    >
    > Take care,
    > Tim
    >

  • Dynamic menu css not displaying correctly in https

    Hello,
    Need help! I'm trying to get my menu to display properly in https but no luck so far. (Chrome and IE) Please let me know if there is a solution. Thank you.
    good menu look http://winxed.businesscatalyst.com/
    bad menu look https://winxed.worldsecuresystems.com/events/eyelash-extension-extensive-class-houston

    Just drop a zoom:100% style on the link, and IE will get it
    right.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "TC2112" <[email protected]> wrote in
    message
    news:fh2nt4$4u8$[email protected]..
    > Hello,
    >
    > The problem is with IE, not Firefox.
    > The content of your menu link tags is a clear gif image
    that is the same
    > height as the background images applied to the link tag
    that change on
    > mouseover.
    > Even though it looks like you want it to in IE, IE is
    actually rendering
    > your
    > code incorrectly.
    > Firefox is rendering your code exactly as it should.
    >
    > Your background images are applied by CSS to the link,
    not the image
    > within.
    > In standards compliant browsers like Firefox, the height
    of link
    > attributes
    > such as background and border are determined by the font
    size or line
    > height
    > that applies to that link, even if there is no text in
    the link.
    > As a test, you can add font-size:38px (the height of
    your background
    > images)
    > to "table.menu" in your CSS and you'll see your entire
    link background
    > images
    > in FF.
    > IE incorrectly streches the link background to the
    height of the image
    > within
    > within the link.
    > IE does the same thing to borders if they are applied to
    just the "a" tag
    > and
    > not to "a img" in the CSS.
    >
    > A quick fix:
    >
    > table.menu { width:186px; margin-top:6px;
    > line-height: 38px; }
    >
    > A better fix and some great information:
    >
    >
    >
    >
    http://projectseven.com/tutorials/css/uberlinks/index.htm
    >
    > and:
    >
    >
    http://css.maxdesign.com.au/listamatic/
    >
    > Hope that helps,
    >
    > Take care,
    > Tim
    >

  • Menu Items not displaying correctly - DW CS4

    This week, I had a trojan attack on my machine and I finally got it cleaned yesterday after a ton of work.  DW CS4 is the only program that wouldn't launch for me after the cleaning.  I re-installed Dreamweaver and now all of my menu's look like "menus/DWMenuFile" and "menus/DWMenuEdit" as described in this post:
    http://forums.adobe.com/message/2030329#2030329
    I tried the recommended solutions and deleted all of the "Configuration" folders in that directory and then restarted DW.  The menus still look the same. Any other ideas on how to fix this?
    Thanks in advance!

    I thought of that.... If that were the case, then all of
    Adobe's examples would not be very useful though. It appears to be
    working now.... I made each Object a Bindable ValueObject
    ("MenuItem") with the specified properties. Not sure WHY it works,
    but it works.
    Thanks everyone.

  • 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.

Maybe you are looking for