Bind menu bar to a menu model

Hello,
I'm trying to bind my menu bar (af:menubar) to a menu model.
I created the menu model from my main unbounded task flow (adfc-config.xml) : right click -> "Create ADF Menu Model..." giving me root_menu.xml.
My menu bar is currently defined in a page fragment mainMenu.jsff used in my pages.
According to the 11g r2 documentation it is possible using the value attribute of the menubar component : Working with Navigation Components
But I can't find how to do this in 11g r1 as there is no value attribute...
Any idea ?
I'm using JDeveloper 11.1.1.7.0.
Thanks.
Yann.

So obviously it seems it is not possible ?
I have tried using an iterator to generate menu items in my menu bar (mainMenu.jsff):
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:menuBar id="mb1" styleClass="mainMenu" stretchId="stretch1">
    <af:iterator var="myMenu" id="i1" value="#{root_menu}" rows="2">
      <af:commandMenuItem text="#{myMenu.label}" id="cmi1" icon="#{myMenu.icon}"
                          action="#{myMenu.doAction}"/>
    </af:iterator>
    <af:spacer id="stretch1" clientComponent="true"/>
  </af:menuBar>
</jsp:root>
Here is my menu definition (root_menu.xml):
<?bxml version="1.0" encoding="windows-1252" ?>
<menu xmlns="http://myfaces.apache.org/trinidad/menu">
  <itemNode id="itemNode_home"
            label="#{adfBundle['testapp.view.TranslatedText'].MAIN_MENU_HOME}"
            action="menu_home" focusViewId="/home"
            icon="/images/icon_home.png"/>
  <itemNode id="itemNode_employees"
            label="#{adfBundle['testapp.view.TranslatedText'].MAIN_MENU_EMPLOYEE_MANAGEMENT}"
            action="menu_employees" focusViewId="/employees"
            icon="/images/icon_user.png"/>
</menu>
My adfc-config.xml :
<?xml version="1.0" encoding="windows-1252" ?>
<adfc-config xmlns="http://xmlns.oracle.com/adf/controller" version="1.2">
  <view id="home">
    <page>/home.jspx</page>
  </view>
  <task-flow-call id="tf-employees">
    <task-flow-reference>
      <document>/WEB-INF/tf-employees.xml</document>
      <id>tf-employees</id>
    </task-flow-reference>
  </task-flow-call>
  <control-flow-rule id="__1">
    <from-activity-id id="__2">*</from-activity-id>
    <control-flow-case id="__4">
      <from-outcome id="__5">menu_home</from-outcome>
      <to-activity-id id="__3">home</to-activity-id>
    </control-flow-case>
    <control-flow-case id="__6">
      <from-outcome id="__8">menu_employees</from-outcome>
      <to-activity-id id="__7">tf-employees</to-activity-id>
    </control-flow-case>
  </control-flow-rule>
</adfc-config>
Then I include the menu fragment (mainMenu.jsff) in my pages home.jspx, employees.jspx and editEmployee.jspx.
Menu items are generated correctly (labels, icons) even if I have warnings (reference myMenu.xxx not found) but only the employees menu item from the home page is working... others don't do anything in all pages.
Did I missed something ?
Can anyone test this ?
Thanks.
Yann.

Similar Messages

  • Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

    Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

    If this happens on monitor 2 of 2, this problem has been solved here:
    http://support.mozilla.com/en-US/questions/794823#answer-157988
    Go to "Firefox"--> "Options" --> "Advanced"
    Then un-check "Use hardware acceleration when available"
    While not verified, I believe this problem is due to an SLI configuration where the focus is on monitor 1. (I.e acceleration is available, but only on monitor 1.)

  • Custom tuning menu, menu bar, and contextual menu transparency levels?

    I'm not talking about simply toggling menu bar transparency (which you can already do in 10.5.5 using System Preferences), but I'd like having the chance to tune transparency level for different objects.
    Is there any way to tune:
    1) menu
    2) menu bar
    3) contextual menu
    transparency level?
    (possibly individually for each of the three categories)
    This would be cool.

    You can't - all the template navigation menus are not made to be changed.
    If you want anything different, then you need to open the Inspector and go to Page and then check the box where it says 'hide navigation menu' and then you can build your own text based menu by using text boxes or shapes etc. and then use hyperlink to link to your pages. In this way you have full control over colour and placement.
    The template navigation menus were not made to be changed.

  • Menu bar pop-up menu help

    i have created a menu bar, with an image. when you place the mouse over the image a pop-up menu apperas with 4 options (about us, contact, services, projects) is there a way i can have a text box open that contains the proper information for each one open when you click on it and then close when you click on a different one. also after a given amout of time have the box disapper like a pop up menu.
    i have cs5, i dont know much about webdesign so if you could plesae give detailed suggestions. thanks

    Tht's what's known in the trade as mystery meat navigation. If the viewer doesn't mouse over the image, they will never find the navigation. To be practical and usable by most people, top level navigation elements need be visible at all times. You will not be able to do what you want with pop-up memus in Fireworks anyway. Use Fireworks for creating the images. Use Dreamweaver for writing the code.

  • Menu bar clock and menu bar input menu disappear

    Every time I reboot the menu bar clock and the menu bar input menu ("the flag") disappear. I have to re-tick the options in the System Preferences (Date & Time > Clock > Show the date and time; International > Input Menu > Show input menu in menu bar). However, after the next reboot they're gone again. What can I do to keep them there permanently?

    You may need to try trashing the com.apple.systemuiserver.plist.
    This can be found in HD/User/Library/Preferences/com.apple.systemuiserver.plist
    Just delete it and reboot.
    Then try to set the new preferences.

  • Spry Menu Bar - Freezing the Menu item in hover when clicking a submenu item

    Hi,
    I am trying to add a feature to a verticle spry menu bar that freezes the menu item or "parent" (to apear to be hovered) when clicking one of the parents sub-menu items. I want to do this so that users can know how they arrived at the page they're on.
    Thanks for your help,
    -Shiva

    To look at your intention in a different way,
    Hover over a submenu item
    Parent item is colored/indicated
    Submenu item is colored/indicated
    Click on the submenu item
    New page opens
    Parent item "remains" colored/indicated on the new page
    There are three or four ways to do this, depending on your site setup, but one basic concept to understand. The emphasis on the Parent menu item is totally independent of whether you got to the new page via the menu or by some other means. The emphasis will always be there, though it will appear to be connected to your clicking on the menu!
    Say you have a menu with two Parent menu items, flowers and trees.
    On the Flowers menu are submenus: Tulips, Roses, and Gardenias, On all three different Flowers pages (Tulips, Roses, Gardenias), the Flowers parent item will be emphasized.
    On the Trees menu are submenus: Oak, Maple, Spruce. On all three different Trees pages (Oak, Maple, Spruce), the Trees parent item will be emphasized.
    If you want to go in to each page individually, you can use a general indicator like id="localemphasis". (To emphasize more than one thing on a page, use a class instead of an id)
    Using this method, on the Tulips, Roses, and Gardenias pages, put id="localemphasis" on the Flowers parent menu item.
    On the Oak, Maple, and Spruce pages, put id="localemphasis" on the Trees parent menu item.
    To control the emphasis from the CSS stylesheet, you won't need to go into each page, but you will ID each parent menu item.
    Give each 'category' (Flowers, Trees) page a body ID to match the category
    Every Flower page wants the Flower parent menu item emphasized, give all three Flower pages a body tag like this: <body id="flowers">
    LIkewise, every Tree page wants the Tree parent menu item emphasized, as <body id="trees">
    Within the menu itself and on ALL pages, give each parent menu item an id to correspond to its category
    <li id="flowers_m">Flowers</li>
    <li id="trees_m">Trees</li>
              I have added a "_m" to remind myself that it is the menu item's id. You might need to put the id on the <a> link if you have not used a list for your menu.
    In your CSS stylesheet,
         #flowers #flowers_m,
         #trees #trees_m  {background-color: red; color: white;}
    Please use your own code! White on red might not be your cup of tea...use the same styling as the "hover" styling you mention in your query.
    To interpret what we have just done, we have said
         make the background-color red and the text white
    for the parent menu item Flowers (id="flowers_m") when you are on a Flowers page (body id="flowers")
    and for the parent item Trees (id="trees_m") when you are on a Trees page (body id="trees").
    This emphasis is good feedback for your user...remember that for SEO purposes, you will also want to use actual HTML text to reinforce the page environment, that is, h1 titles like FLOWERS and TREES. That will provide more feedback for your user.
    Beth

  • Spry hover. Main menu bar, and sub menu highlight.

    Hello,
    I'm currently working on a project and it requries the use of Spry. I've got a horrizontal menu bar, and have a few questions.
    1. Is there a way to have the ACTIVE page/button, in the menu, a diffrent background image than the other link in the bar? For example. A pressed in button as the active current page. and the remain buttons looking as if "popping" out. Also a requirement for this project is using an iFrame for the main content with all pages linked to the iframe, I think this limits what I can do, correct?
    2. I've got what I want. somewhat, in regards to a background image and a hover. However I do NOT want my drop down/submenu to have the same highlight as the main menu bar. I want the main menu bar to have an image as the hover, but I only need to the drop down to have a color for it's highlight and no image.
    You can see what I'm talking about at http://www.ryanmarsh.ca/final

    1. Is there a way to have the ACTIVE page/button, in the menu, a diffrent background image than the other link in the bar? For example. A pressed in button as the active current page. and the remain buttons looking as if "popping" out. Also a requirement for this project is using an iFrame for the main content with all pages linked to the iframe, I think this limits what I can do, correct?
    There are different ways to have the active page button fifferent to the rest. Depending on your setup, you can inline styling, you could give the page an ID and using CSS rules give it a difference or you can use the SpryElementSelector to discover the URL and compare that with the URL in your menu. iFrames have no negative effects on a menubar.
    2. I've got what I want. somewhat, in regards to a background image and a hover. However I do NOT want my drop down/submenu to have the same highlight as the main menu bar. I want the main menu bar to have an image as the hover, but I only need to the drop down to have a color for it's highlight and no image.
    That can be done using CSS. Have a look here before you start http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
    Other references http://www.adobe.com/devnet/dreamweaver/spry.html in particular http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design.html
    Gramps

  • Spry Menu Bar Positioning Problem in IE

    I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
    In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
      <ul id="MenuBar2" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
          <ul>
            <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
            <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
            <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
          </ul>
        </li>
      </ul>
    <ul id="MenuBar3" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
          <ul>
            <li><a href="#">SLIDING DOORS</a></li>
            <li><a href="#">BI-FOLD DOORS</a></li>
            <li><a href="#">ROOM DIVIDERS</a></li>
          </ul>
        </li>
      </ul>
    Here is the page where you can see the problem if you view it with IE, and see that it's  fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
    http://2113web.com/indeco/index.html
    I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
    Below is the 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%;
        font-weight:bold;
        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: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        white-space: nowrap;
    /* 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: auto;
        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;
        top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        float: none;
        background-color:#f5f5e8;
        height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 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:none;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: transparent;
        padding: 0.5em 0.75em;
        color: #59330d;
        text-decoration: 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: transparent;
        color: #afa06f;
    /* 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: transparent;
        color: #afa06f;
    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%;
    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: inline;
            f\loat: left;
            background: #FFF;
    Perry

    Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
    Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
    I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
        padding: 0.5em 2em 0.5em 0.75em;"
    With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
    Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
    Perry
    @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: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: auto;
        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;
        margin-top: 40px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        display: block;
        float: none !important;
        width: auto;
        white-space: nowrap;
    /* 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;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #f5f5e8;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: 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: #f5f5e8;
        color: #afa06f;
    /* 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: #f5f5e8;
        color: #afa06f;
    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
    /* 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
    /* 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
    /* 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
    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);
        background: transparent;
    /* 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;

  • Spry Menu Bar won't work correctly.

    This is an image of what the overall menu bar layout should be like-all of the links and sublinks.
    I have a few problems that I am having all relating to the spry menu bar.
    I ran my code through w3c validation service but it came up with alot of errors which when corrected didn't make sense or work either.
    I made this menu bar in a widget called spry menu bar 2.0.  I then edited it to place in the correct names and it doesn't work correctly and the w3c validation code seems to have 43 errors with the spry bar. I am been over it a dozen times and I can't seem to figure it out.  Here is the code.
    Also, have I made the links correctly?
    I would appreciate any help you could offer! thank you
    Dreamweaver cs 5.5
    <!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 -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    #container {
        width: 1000px;
    #header {
        width: 1000px;
    </style>
    <link href="../Stylesheet_Unicorn_main_layout_template.css" rel="stylesheet" type="text/css" />
    <link href="../Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <script src="../Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:#000000;   
        font-family: "Comic Sans MS", cursive; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 18px;
        font-style: normal;
        padding:0;   
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 80em;
    .MenuBarFixedCentered {
        float: none;
        width: 80em;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 0px 10px 0px 0px;
        background-color:#000000;   
        border-width:1px;
        border-color: #cccccc #ffffff #cccccc #ffffff;
        border-style: none solid none solid;
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:left;
        line-height:1.4em;
        color:#ff00ff;
        background-color:#000000;
        padding: 3px 3px 3px 3px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 16px;
        font-style: normal;
        background-color:#000000;
        padding:0px 2px 0px 0px;
        border-width:1px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:#000033;
        color:#ff00ff;
        padding: 6px 12px 6px 5px;
        width: 7em;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #999999;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: #999999; /* consider exposing this prop separately*/
        color: #ff0000;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: #999999;
        color: #ff0000;
    #MenuBar .SubMenu .MenuItemHover {
        background-color: #cccccc;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: #cccccc;
        color: #ff0000;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: #000000;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer &amp; MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: #000000;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: #999999; /* consider exposing this prop separately*/
        color: #ff0000;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: #cccccc; /* consider exposing this prop separately*/
        color: #ff0000;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="container"><!-- TemplateBeginEditable name="header_editable" -->
      <div id="header">Unicorn Writers Conference</div>
    <!-- TemplateEndEditable -->
      <div id="menubar_left">
        <ul id="MenuBar">
          <li> <a href= "../Pages/home.html">Home</a></li>
          <li> <a href="#">Events</a>
          <li> <a href="#">Mission Statement</a>
          <li> <a href="#">Resources</a>
            <ul>
              <li> <a href="#">Advanced networking</a></li>
              <li> <a href="#">Query Review</a>
              <li> <a href="#">Ms Review Sessions</a>
              <li> <a href="#">1-1 Sessions</a>
              <li> <a href="#">Workshops</a>
              <li> <a href="#">Genre Chart</a>
              <li> <a href="#">Writers Links</a>
                   </ul></li>
                      <li> <a href="#">Key Presenters</a>
                          <ul>
                            <li> <a href="#">Speakers</a>
                                <ul>
                                    <li> <a href="../Pages/2013_speakers_page.html">Speakers 2013</a></li>
                                    <li> <a href="#">Speakers 2012</a>
                                </ul>
                            <li> <a href="#">Editors</a>
                                <ul>
                                    <li> <a href="#">Editors 2013</a></li>
                                    <li> <a href="../Pages/2012_editors.html">Editors 2012</a>
                                </ul>
                            <li> <a href="#">Literary Agents</a>
                                <ul>
                                    <li> <a href="../Pages/2013_L_agents.html">Literary Agents 2013</a></li>
                                    <li> <a href="../Pages/2012_editors.html">Literary Agents 2012</a>
                              </ul>
                         </ul>
                      <li> <a href="#">Information</a>
                          <ul>
                            <li> <a href="#">St. Clements</a></li>
                            <li> <a href="#">Directions</a></li>
                            <li> <a href="#">Hotels</a></li>
                            <li> <a href="#">Menu</a></li>
                            <li> <a href="#">Unicorn Photo Gallery</a></li>
                            <li> <a href="#">Day Schedule</a></li>
                            <li> <a href="#">FAQ</a></li>
                            <li> <a href="#">Staff</a></li>
                            <li> <a href="#">Contact</a></li>
                          </ul>
                      <li> <a href="#">Registration</a></li>
                      <li> <a href="#">Acclaim</a>
                          <ul>
                              <li> <a href="#">Spotlights</a></li>
                              <li> <a href="#">Testamonials</a>
                            <li> <a href="#">Sponsorship</a>
                        </ul>   
                      <li> <a href="#">Classifieds</a>
                          <ul>
                            <li> <a href="#">View</a></li>
                            <li> <a href="#">Place</a></li>
                        </ul>
                      <li> <li> <a href="#">Merchandise</a></li>
                    </ul>
                  </li>
              </li>
            </ul>
          </li>
        </ul>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
          widgetClass: "MenuBar MenuBarVertical MenuBarMenuBarVerticalLeftShrink",
          insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
        </script>
      </div>
      <!-- TemplateBeginEditable name="main_content_editable" -->
      <div id="main_content">Content for New Div Tag Goes Here</div>
      <!-- TemplateEndEditable --></div>
    <div id="footer">Content for  id "footer" Goes Here</div>
    </body>
    </html>

    These Spry support files are all 404 Not found on server.
    <link href="../Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <script src="../Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    Nancy O.

  • Spry menu bar places vertically, not horizontally?

    I followed the tutorial on using the widget browser to download Spry Menu Bar 2.0 and after configuring for a horizontal bar placed the bar in the tutorial index.html. The placement results in a vertical menu bar. What am I doing wrong?
    SPRY CODE
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Spry Menu Bar - Basic : tcm.menu</title>
    <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/SpryDOMUtils.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
    <script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
    <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>
    <style type="text/css">
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
    These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
    MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
    MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
    MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
    MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
    and centered in its parent container.
    MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
    background-color:#b0c9d9;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
    MenuItem, and MenuItemLabel
    at a given level all use same definition for ems.
    Note that this means the size is also inherited to child submenus,
    so use caution in using relative sizes other than
    100% on submenu fonts. */
    font-weight: bold;
    font-size: 18px;
    font-style: normal;
    padding:0;
    border-color: #cddce7 #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
    .MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
    .MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
    .MenuBarFixedLeft {
    float: left;
    width: 960px;
    .MenuBarFixedCentered {
    float: none;
    width: 960px;
    margin-left:auto;
    margin-right:auto;
    .MenuBarFixedCentered br {
    clear:both;
    display:block;
    .MenuBarFixedCentered .SubMenu br {
    display:none;
    .MenuBarFullwidth {
    float: left;
    width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0; /* Zero out margin  on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
    padding: 0px 10px 0px 0px;
    background-color:transparent;
    border-width:2px;
    border-color: #cddce7 #5c6a72 #5c6a72 #cddce7;
    border-style: solid solid solid solid;
    #MenuBar  .MenuItemFirst {
    border-style: solid solid solid solid;
    #MenuBar .MenuItemLast {
    border-style: solid solid solid solid;
    #MenuBar  .MenuItem  .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#333333;
    background-color:transparent;
    padding: 6px 15px 6px 25px;
    width: 138px;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    font-size: 16px;
    font-style: normal;
    background-color:#677e8c;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:transparent;
    color:#ffffff;
    padding: 6px 12px 6px 5px;
    width: 171px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
    background-color: #677e8c;
    border-color: #697278 #b8c4ca #b8c4ca #697278;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
    background-color: #b0c9d9;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #000000;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
    background-color: transparent;
    min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
    and your personal taste.
    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
    on MenuItemContainer and MenuItem on the parent
    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
    the dropdown with the left of the menu item label.*/
    z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: transparent;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    </style>
    </head>
    <body>
    <ul id="MenuBar">
      <li> <a href="#">Home</a> </li>
      <li> <a href="#">Entertainment</a>
      <ul>
        <li> <a href="#">TV Listings</a> </li>
        <li> <a href="#">Music</a>
          <ul>
            <li> <a href="#">Hits</a> </li>
            <li> <a href="#">Ragga</a>
              <ul>
                <li> <a href="#">Roots</a> </li>
                <li> <a href="#">Reggaeton</a> </li>
                <li> <a href="#">Dancehall</a> </li>
              </ul>
            </li>
            <li> <a href="#">Country</a> </li>
          </ul>
        </li>
        <li> <a href="#">The Dirt</a>
          <ul>
            <li> <a href="#">Hollywood</a> </li>
            <li> <a href="#">NY Beat</a> </li>
            <li> <a href="#">London Scene</a> </li>
          </ul>
        </li>
        <li> <a href="#">The Web</a> </li>
      </ul>
      </li>
      <li> <a href="#">Politics</a> </li>
      <li> <a href="#">Sports</a>
        <ul>
          <li> <a href="#">Football</a> </li>
          <li> <a href="#">Baseball</a> </li>
          <li> <a href="#">Basketball</a> </li>
          <li> <a href="#">Racing</a>
            <ul>
              <li> <a href="#">F1</a> </li>
              <li> <a href="#">Indy Car</a> </li>
              <li> <a href="#">Stock Car</a> </li>
            </ul>
      </li>
        </ul>
      </li>
      </ul>
    <script type="text/javascript">
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
      widgetClass: "MenuBar  MenuBarLeftShrink",
      insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    </script>
    </body>
    </html>
    INDEX.HTML
    <!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>Bayside Pulse</title>
    <link href="styles/bayside.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <link href="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic. css" rel="stylesheet" type="text/css" />
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/plugins/MenuBar2/Spr yMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/plugins/MenuBar2/Spr yMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
    These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
    MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
    MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
    MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
    MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
    and centered in its parent container.
    MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
    background-color:#b0c9d9;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
    MenuItem, and MenuItemLabel
    at a given level all use same definition for ems.
    Note that this means the size is also inherited to child submenus,
    so use caution in using relative sizes other than
    100% on submenu fonts. */
    font-weight: bold;
    font-size: 18px;
    font-style: normal;
    padding:0;
    border-color: #cddce7 #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
    .MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
    .MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
    .MenuBarFixedLeft {
    float: left;
    width: 960px;
    .MenuBarFixedCentered {
    float: none;
    width: 960px;
    margin-left:auto;
    margin-right:auto;
    .MenuBarFixedCentered br {
    clear:both;
    display:block;
    .MenuBarFixedCentered .SubMenu br {
    display:none;
    .MenuBarFullwidth {
    float: left;
    width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0; /* Zero out margin  on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
    padding: 0px 10px 0px 0px;
    background-color:transparent;
    border-width:2px;
    border-color: #cddce7 #5c6a72 #5c6a72 #cddce7;
    border-style: solid solid solid solid;
    #MenuBar  .MenuItemFirst {
    border-style: solid solid solid solid;
    #MenuBar .MenuItemLast {
    border-style: solid solid solid solid;
    #MenuBar  .MenuItem  .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#333333;
    background-color:transparent;
    padding: 6px 15px 6px 25px;
    width: 138px;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    font-size: 16px;
    font-style: normal;
    background-color:#677e8c;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:transparent;
    color:#ffffff;
    padding: 6px 12px 6px 5px;
    width: 171px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
    background-color: #677e8c;
    border-color: #697278 #b8c4ca #b8c4ca #697278;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
    background-color: #b0c9d9;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #000000;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
    background-color: transparent;
    min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
    and your personal taste.
    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
    on MenuItemContainer and MenuItem on the parent
    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
    the dropdown with the left of the menu item label.*/
    z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: transparent;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="wrapper">
      <div id="header"><img src="images/bayside_pulse.jpg" width="960" height="150" alt="Bayside Pulse" /></div>
      <div id="nav">
        <ul id="MenuBar">
          <li> <a href="#">Home</a></li>
          <li> <a href="#">Entertainment</a>
            <ul>
              <li> <a href="#">TV Listings</a></li>
              <li> <a href="#">Music</a>
                <ul>
                  <li> <a href="#">Hits</a></li>
                  <li> <a href="#">Ragga</a>
                    <ul>
                      <li> <a href="#">Roots</a></li>
                      <li> <a href="#">Reggaeton</a></li>
                      <li> <a href="#">Dancehall</a></li>
                    </ul>
                  </li>
                  <li> <a href="#">Country</a></li>
                </ul>
              </li>
              <li> <a href="#">The Dirt</a>
                <ul>
                  <li> <a href="#">Hollywood</a></li>
                  <li> <a href="#">NY Beat</a></li>
                  <li> <a href="#">London Scene</a></li>
                </ul>
              </li>
              <li> <a href="#">The Web</a></li>
            </ul>
          </li>
          <li> <a href="#">Politics</a></li>
          <li> <a href="#">Sports</a>
            <ul>
              <li> <a href="#">Football</a></li>
              <li> <a href="#">Baseball</a></li>
              <li> <a href="#">Basketball</a></li>
              <li> <a href="#">Racing</a>
                <ul>
                  <li> <a href="#">F1</a></li>
                  <li> <a href="#">Indy Car</a></li>
                  <li> <a href="#">Stock Car</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
      widgetClass: "MenuBar  MenuBarLeftShrink",
      insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
        </script>
      </div>
      <div id="sidebar">
        <h3>Check This Out</h3>
        <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt quis nostrud exercitation. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat.</p>
        <p>Sunt in culpa qui officia deserunt ullamco laboris nisi. Duis aute irure dolor mollit anim id est laborum. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate.</p>
        <p>Lorem ipsum dolor sit amet, duis aute irure dolor cupidatat non proident. Sed do eiusmod tempor incididunt. </p>
      </div>
      <div id="maincontent">
        <h2>There&#8217;s More to San Francisco than Cafe Townsend</h2>
        <p>Sure, Cafe Townsend's cool, and Chef Ipsum provides a great range of international cuisine. But San Francisco is the city where you can weave dreams of your own. Come, explore!</p>
        <h3>Scott&#8217;s For a Night to Remember</h3>
        <p>It's certainly one you're unlikely to forget&#8212;or should that be Fegette? Lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. <img src="images/adobeduo.jpg" alt="Scott and Duane" width="400" height="233" class="floatright" />In reprehenderit in voluptate quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.</p>
        <p>Velit esse cillum dolore mollit anim id est laborum. Ut enim <a href="#">ad minim veniam</a>, ullamco laboris nisi in reprehenderit in voluptate. Excepteur sint occaecat duis aute irure dolor consectetur adipisicing elit. Ut labore et dolore magna aliqua.</p>
        <p>Sed do eiusmod tempor incididunt ut enim ad minim veniam, duis aute irure dolor. Ullamco laboris nisi in reprehenderit in voluptate excepteur sint occaecat. Cupidatat non proident, sunt in culpa lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. Consectetur adipisicing elit, <a href="#">ullamco laboris nisi</a> in reprehenderit in voluptate.</p>
        <p>Eu fugiat nulla pariatur. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo consequat.</p>
        <p>Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate velit esse cillum dolore. Ullamco laboris nisi cupidatat non proident, ut aliquip ex ea commodo consequat. Sunt in culpa ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    </body>
    </html>

    Please upload your file to a server and give us a link. It is extremely difficult to work with pasted-in code...much more useful to see it in working order.
    Beth

  • Contents of page not displaying in IE, after Spry Menu Bar 2.0

    Entire page displays in Firefox, Safari, Chrome. But in IE, nothing appears after the menu bar. Here's the link, and the code to follow:
    http://nowagenewmedia.com/organica/
    Code:
    <!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>Organica Natural Foods</title>
    <link href="basic.css" rel="stylesheet" type="text/css" />
    <link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:#003300;   
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: bold;
        font-size: 12px;
        font-style: normal;
        padding:0;   
        border-color: #999999 #999999 #999999 #999999;
        border-width:0px;
        border-style: solid solid solid solid;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 900px;
    .MenuBarFixedCentered {
        float: none;
        width: 900px;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 0px 0px 0px 0px;
        background-color:transparent;   
        border-width:1px;
        border-color: #cccccc #ffffff #cccccc #ffffff;
        border-style: none solid none solid;
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 6px 19px 6px 19px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 12px;
        font-style: normal;
        background-color:transparent;
        padding:0px 2px 0px 0px;
        border-width:1px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#ffffff;
        padding: 6px 12px 6px 5px;
        width: 7em;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: transparent;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #999999;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #999999;
    #MenuBar .SubMenu .MenuItemHover {
        background-color: #003300;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #999999;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: #003300;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: #003300;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #999999;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #999999;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body background="media/wood.jpg">
    <table width="882" border="0" align="center" cellpadding="0" cellspacing="0" class="table_main">
      <tr>
        <td height="160" colspan="2"><img src="media/header.jpg" width="900" height="160" alt="header" /></td>
      </tr>
      <tr>
        <td height="35" colspan="2" class="nav_back"><ul id="MenuBar">
          <li> <a href="#">Home</a></li>
          <li> <a href="#">Organica's Kitchen</a>
            <ul>
              <li> <a href="#">Menus</a></li>
              <li> <a href="#">Catering</a></li>
            </ul>
          </li>
          <li> <a href="#">Juice Bar</a></li>
          <li> <a href="#">Produce</a></li>
          <li> <a href="#">Supplements</a></li>
          <li> <a href="#">Grocery</a></li>
          <li> <a href="#">Body Care</a></li>
          <li> <a href="#">Events</a></li>
          <li> <a href="#">Contact</a></li>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
          widgetClass: "MenuBar  MenuBarFixedCentered",
          insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
          </script></td>
      </tr>
      <tr>
        <td width="211" height="400" class="left"><h2>Sign-up for our Loyalty Card<br />     
        <img src="media/loyalty.jpg" width="200" height="129" alt="loyalty" /></h2>
          <hr width="90%" />
          <h2>Subscribe to our e-News
            <style>
    .link,
    .link a,
    .signupframe
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        .link,
        .link a {
            text-decoration: none;
        .signupframe {
            border: 0px solid #000000;
            background: transparent;
    .signupframe .required {
        font-size: 10px;
            </style>
          </h2>
          <form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup8190" accept-charset="UTF-8" onsubmit="return verifyRequired8190();" >
    <input type="hidden" name="redirect" value="http://organicanaturalfoods.com/thanks.html" />
    <input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html" />
    <div id="SignUp">
    <table width="200" class="signupframe" border="0" cellspacing="0" cellpadding="5">
        <tr>
          <td align="left">
            <div align="center">
              <input name="fields_email" type="text" value="Your Email Here..." />
            </div></td>
        </tr>
        <input type="hidden" name="listid" value="70490" />
        <input type="hidden" name="specialid:70490" value="HHBU" />
        <input type="hidden" name="clientid" value="971128" />
        <input type="hidden" name="formid" value="8190" />
        <input type="hidden" name="reallistid" value="1" />
        <input type="hidden" name="doubleopt" value="0" />
        <tr>
          <td><div align="center">
            <input type="submit" name="Submit" value="Submit" />
          </div></td>
        </tr>
        </table>
    </div>
    </form>
          <p>
      <script type="text/javascript">
    var icpForm8190 = document.getElementById('icpsignup8190');
    if (document.location.protocol === "https:")
        icpForm8190.action = "https://app.icontact.com/icp/signup.php";
    function verifyRequired8190() {
      if (icpForm8190["fields_email"].value == "") {
        icpForm8190["fields_email"].focus();
        alert("The Email field is required.");
        return false;
    return true;</script></p>
          <hr width="90%" />
          <h2>Find us on Facebook
            <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOrganicaN aturalFood&width=200&colorscheme=light&show_faces=false&border_color&stream=false&header=f alse&height=100" scrolling="No" frameborder="0" style="border:none; overflow:hidden; width:200px; height:100px;" allowtransparency="true"></iframe>
        </h2>
        <h2> </h2></td>
        <td width="663" class="right"><h1>Welcome to Organica!</h1>
        <p>&quot;A Natural Organic Market&quot;, Organica provides fresh organic produce,  whole foods, groceries, persihibles, frozen foods, natural body care,  pet foods, cleaning products and more. <br />
          <br />
          Shop our vitamin  department for a wide varitey of supplements, protein shakes,  probiotics, herbs, and products from our top-of-the-line vitamin  companies.<br />
          <br />
        Don't forget to visit our renowned Natural Gourmet  Prepared Food Department, where all foods are prepared fresh daily. You  will be able to find all your needs for breakfast, lunch, dinner or your  next party! </p></td>
      </tr>
      <tr>
        <td colspan="2" class="footer">About Us | Links | Employment | Contact Us<br />
          All contents ©2011 Organica Natural Foods, Inc. | Site Design: Now Age New Media</td>
      </tr>
    </table>
    </body>
    </html>

    Win 7.
    I see the entire page here in IE9, IE8 (Compatibility View), Firefox and Chrome.

  • Spry menu bar won't update when published

    I am building a dreamweaver webpage though a template.
    for some reason it will not change the spry menu bar to update the changes made to the links on it.
    that and the links won't work on the website (i uploaded it to a test website).
    I am not sure if it is the same problem.
    I changed the links from site to document relative.
    I also checked the codes in http://validator.w3.org/check and http://jigsaw.w3.org/css-validator/ .
    I also read this link and it didn't help me http://helpx.adobe.com/dreamweaver/kb/paths-dreamweaver-templates.html .
    Can someone help please!
    Thank you

    I am not sure why that will not upload to the site correctly.
    I am uploading to a godaddy server. Is there a way I should be saving things (links and such) that I might be doing wrong? am I naming my links incorrectly? how do I make them so they will work once uploaded.
    I followed the suggestions that you made and it looks like it is there but for somereason when i preview the page in a browser or live view the background image (parchment) doesn't show up on the screen.and the spry menu bar only comes up as an unordered list.  I am not sure what would be causing this.
    I have attached the code for 2 pages the first is the code of the  template test file you suggested I make and the second is the code for the education connection page (this is a page that was made from the template and the background image is not working-i had this problem before but i thought it was fixed as the website has it fixed when i published it)
    TEST SITE:
    <!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"><!-- InstanceBegin template="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/Templates/Main_sitepage_template.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Jan Kardys' Literary Agency</title>
    <!-- InstanceEndEditable -->
    <style type="text/css">
    #header {
        float: left;
        width: 1000px;
    #Menu_bar {
        float: left;
        width: 190px;
    #Page_Content {
        float: right;
        width: 1000px;
        font-family: "MS Serif", "New York", serif;
    #footer {
        float: left;
        width: 1000px;
    #Main_content {
        float: left;
        width: 395px;
        padding-left: 100px;
    #xtra_content {
        float: right;
        width: 395px;
        padding-right: 100px;
        font-family: "MS Serif", "New York", serif;
    #container {
        width:  1000px;
        margin: 0 auto;
        background-image: url(file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/Images/Parchment.gif);
        overflow: hidden;
    #header_title {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #0C3;
        float: left;
    #header_menubar {
        float: right;
    </style>
    <style type="text/css">
    body {
    </style>
    <script src="/js/enhance.js" type="text/javascript"></script>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryDOMUtils.js"" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2466548" binding="#OAWidget" />
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    <link href="/css/basic.css" rel="stylesheet" type="text/css" />
    <link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;   
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 16px;
        font-style: normal;
        padding:0;   
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 80em;
    .MenuBarFixedCentered {
        float: none;
        width: 80em;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 0px 0px 0px 0px;
        background-color:transparent;   
        border-width:1px;
        border-color: #cccccc #ffffff #cccccc #ffffff;
        border-style: none solid none solid;
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#33ff66;
        background-color:transparent;
        padding: 6px 15px 6px 15px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 14px;
        font-style: normal;
        background-color:transparent;
        padding:0px 2px 0px 0px;
        border-width:1px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#00ff33;
        padding: 6px 5px 6px 5px;
        width: 7em;
        width:auto;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: transparent;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #000000;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #000000;
    #MenuBar .SubMenu .MenuItemHover {
        background-color: transparent;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #333333;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #000000;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #333333;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    </head>
    <body>
    <div id= "container">
    <div id="header">
      <div id="header_title"><h1>Jan kardy's Literary Agency</h1></div>
      <div id="header_menubar">
    </li>
        </ul>
        <!-- InstanceBeginEditable name="menubar_region" -->
        <ul id="MenuBar">
          <li> <a href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/index.html">Home</a></li>
          <li> <a href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/about_jankardys.html">About Jan Kardys</a></li>
          <li> <a href="#">Resources</a>
            <ul>
              <li> <a href="/Education_connection.html">Education Connection</a></li>
              <li> <a href="/submission_guidelines.html">Submission Guidelines</a> </li>
              <li> <a href="#">Blogs</a>
                <ul>
                  <li> <a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
                  <li> <a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Netwroking Blog</a></li>
                </ul>
              </li>
              <li> <a href="#">First Steps to Publishing</a></li>
              <li> <a href="#">Library &amp; Publishing Events</a></li>
              <li> <a href="#">Art Gallery</a> </li>
            </ul>
          </li>
          <li> <a href="#">Clients</a></li>
          <li> <a href="#">Contact Jan Kardys</a> </li>
        </ul>
        <!-- InstanceEndEditable --><script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
          widgetClass: "MenuBar  MenuBarLeftShrink",
          insertMenuBarBreak: true,
          mainMenuShowDelay: 200,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
        </script>
    </li>
          </ul>
      </div>
    </div>
    <div id="Page_Content"><!-- InstanceBeginEditable name="Content_main_editable" -->
      <div id="Main_content">hi</div>
    <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Xtra_content_editable" -->
      <div id="xtra_content">
        <h3>News &amp; Events </h3>
        <p> </p>
      </div>
      <!-- InstanceEndEditable --></div>
    <div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
    </div>
    </body>
    <!-- InstanceEnd --></html>
    EDUCATION CONNECTION CODE:
    <!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"><!-- InstanceBegin template="/Templates/Main_sitepage_template.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Jan Kardys' Literary Agency</title>
    <!-- InstanceEndEditable -->
    <style type="text/css">
    #header {
        float: left;
        width: 1000px;
    #Menu_bar {
        float: left;
        width: 190px;
    #Page_Content {
        float: right;
        width: 1000px;
        font-family: "MS Serif", "New York", serif;
    #footer {
        float: left;
        width: 1000px;
    #Main_content {
        float: left;
        width: 395px;
        padding-left: 100px;
    #xtra_content {
        float: right;
        width: 395px;
        padding-right: 100px;
        font-family: "MS Serif", "New York", serif;
    #container {
        width:  1000px;
        margin: 0 auto;
        background-image: url(/Images/Parchment.gif);
        overflow: hidden;
    #header_title {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #0C3;
        float: left;
    #header_menubar {
        float: right;
    </style>
    <style type="text/css">
    body {
    </style>
    <script src="/js/enhance.js" type="text/javascript"></script>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryDOMUtils.js"" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2466548" binding="#OAWidget" />
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    <link href="/css/basic.css" rel="stylesheet" type="text/css" />
    <link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;   
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 16px;
        font-style: normal;
        padding:0;   
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 80em;
    .MenuBarFixedCentered {
        float: none;
        width: 80em;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 0px 0px 0px 0px;
        background-color:transparent;   
        border-width:1px;
        border-color: #cccccc #ffffff #cccccc #ffffff;
        border-style: none solid none solid;
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#33ff66;
        background-color:transparent;
        padding: 6px 15px 6px 15px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 14px;
        font-style: normal;
        background-color:transparent;
        padding:0px 2px 0px 0px;
        border-width:1px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#00ff33;
        padding: 6px 5px 6px 5px;
        width: 7em;
        width:auto;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: transparent;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #000000;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #000000;
    #MenuBar .SubMenu .MenuItemHover {
        background-color: transparent;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #333333;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #000000;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #333333;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    </head>
    <body>
    <div id= "container">
    <div id="header">
      <div id="header_title"><h1>Jan kardy's Literary Agency</h1></div>
      <div id="header_menubar">
    </li>
        </ul>
        <!-- InstanceBeginEditable name="menubar_region" -->
        <ul id="MenuBar">
          <li> <a href="/index.html">Home</a></li>
          <li> <a href="/about_jankardys.html">About Jan Kardys</a></li>
          <li> <a href="#">Resources</a>
            <ul>
              <li> <a href="/Education_connection.html">Education Connection</a></li>
              <li> <a href="/submission_guidelines.html">Submission Guidelines</a> </li>
              <li> <a href="#">Blogs</a>
                <ul>
                  <li> <a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
                  <li> <a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Netwroking Blog</a></li>
                </ul>
              </li>
              <li> <a href="#">First Steps to Publishing</a></li>
              <li> <a href="#">Library &amp; Publishing Events</a></li>
              <li> <a href="#">Art Gallery</a> </li>
            </ul>
          </li>
          <li> <a href="#">Clients</a></li>
          <li> <a href="#">Contact Jan Kardys</a> </li>
        </ul>
        <!-- InstanceEndEditable --><script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
          widgetClass: "MenuBar  MenuBarLeftShrink",
          insertMenuBarBreak: true,
          mainMenuShowDelay: 200,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
        </script>
    </li>
          </ul>
      </div>
    </div>
    <div id="Page_Content"><!-- InstanceBeginEditable name="Content_main_editable" -->
      <div id="Main_content"><img src="/Images/jankardys.jpg" width="171" height="234" alt="Jan_kardys_pictuer" /></div>
    <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Xtra_content_editable" -->
      <div id="xtra_content">
        <center><h3>Signed Book Deal</h3>
        <p><a href="http://jankardys.com/Advance_Royalties.html" title="Advance_Royalties.html">Advance/Royalties</a></p>
        <p><a href="http://jankardys.com/Author_Quotes.html" title="Author_Quotes.html">Author Quotes</a></p>
        <p><a href="http://jankardys.com/Book_Deal.html" title="Book_Deal.html">Book Deal</a></p>
        <p><a href="http://jankardys.com/Copyright_Information.html" title="Copyright_Information.html">Copyright Information</a></p>
        <p><a href="http://jankardys.com/Editorial_Assistance.html" title="Editorial_Assistance.html">Freelance Editorial Assistance</a></p>
        <p><a href="http://jankardys.com/Electronic_Rights.html" title="Electronic_Rights.html">Electronic Rights Guidelines</a></p>
        <p><a href="http://jankardys.com/Google_Products.html" title="Google_Products.html">Google Products</a></p>
        <p><a href="http://jankardys.com/Out_of_Print_Reversions.html" title="Out_of_Print_Reversions.html">Out of Print Reversions</a></p>
        <p><a href="http://jankardys.com/Permissions.html" title="Permissions.html">Permissions</a></p>
        <p><a href="http://jankardys.com/Photo_release.html" title="Photo_release.html">Photo Release</a></p>
        <p><a href="http://jankardys.com/Return_of_Advance.html" title="Return_of_Advance.html">Return of Advance</a></p>
        <p><a href="http://jankardys.com/Subrights_Checklist.html" title="Subrights_Checklist.html">Subrights Checklist</a></p></center>
        <p>  </p>
        <p> </p>
      </div>
      <!-- InstanceEndEditable --></div>
    <div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
    </div>
    </body>
    <!-- InstanceEnd --></html>

  • Spry menu bar

    Hi I need help with verticle spry menu bar drop down menu. When I test locally it's working fine but when I upload the drop down menu isn't working I've spent days to fix it but couldn't can anyone help me it's driving mad!!!!!
    Thanks.

    Hi Ken,
    I hope this will help.
    body {
              margin-left: 0px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
    .ALLCAPITAL {          font: normal 14px/normal Tahoma, Geneva, sans-serif;
              text-transform: uppercase;
              color: #CCC;
              font-weight: bold;
    .ALLCAPITAL {          color: #900;
    .ALLCAPITAL {          font-family: Arial, Helvetica, sans-serif;
    .blue1 {color: #000;
              font: normal 16px/normal Tahoma, Geneva, sans-serif;
    .blue1 {          color: #2E1502;
              font-size: 14px;
              font-style: italic;
    .darkblue {          color: #677E98;
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-size: 14px;
    .john11white {          color: #FFF;
              font: normal 12px/normal Tahoma, Geneva, sans-serif;
              text-transform: none;
    .lightblue {          color: #6D7E98;
    .newrule {          color: #84A1C2;
              text-align: justify;
              font: bold normal 16px/normal Tahoma, Geneva, sans-serif;
              text-transform: none;
              font-size: 16px;
              font-family: Tahoma, Geneva, sans-serif;
    body,td,th {
              font: normal 12px Arial, Helvetica, sans-serif;
              font-size: 12px;
              color: #000;
    .Navbarbrown2012 {          font-family: Tahoma, Geneva, sans-serif;
    ul.MenuBarHorizontal {          margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              cursor: default;
              width: auto;
    .SIZE16 {
              font-size: 16px;
    .ALLCAPITAL .john11white .lightblue .john11white .john11white .john11white {
              font: normal 10px/normal Arial, Helvetica, sans-serif;
              text-transform: uppercase;
              color: #677E9F;
    /* 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: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              position: relative;
              text-align: inherit;
              cursor: pointer;
              width: 14em;
              float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              z-index: 1020;
              cursor: default;
              width: 14em;
              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: 170px;
              text-align: left;
    /* 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;
              text-align: center;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
              border: 1px solid #CCC;
    /* 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-weight: normal;
              text-align: inherit;
              width: 14em;
    /* 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: #CCC;
              color: #FFF;
              width: 14em;
              text-align: inherit;
    /* 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-repeat: no-repeat;
              background-position: 95% 50%;
              width: 14em;
              text-align: inherit;
    /* 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);
              ul.MenuBarHorizontal li.MenuBarItemIE
              display: inline;
              f\loat: inherit;
              background: #FFF;
    /* 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: #999;
              color: #FFF;
              width: 14em;
              text-align: inherit;
    .whiteletterenglish {
              font: normal 14px/normal Arial, Helvetica, sans-serif;
              color: #FFF;
    .TAHOMANEW div {
              font-weight: normal;
    .CENTRE {
              text-align: center;
    .B {          color: #09F;
              font-family: Tahoma, Geneva, sans-serif;
              font-weight: bold;
              font-size: 14px;
    .BLACKFONT {          font: bold normal 12px/normal Tahoma, Geneva, sans-serif;
              text-transform: none;
              color: #000;
              font-weight: bold;
    .BRIBOLD {color: #FFF;
              font-family: Arial, Helvetica, sans-serif;
    .Newwaybigletter {          font: normal 18px Arial, Helvetica, sans-serif;
              text-transform: uppercase;
              color: #677E98;
              font-style: italic;
    .TA2012 {          font-family: Tahoma, Geneva, sans-serif;
              color: #000;
              font-weight: normal;
    .TAHOMABROWN {
              font-family: Arial, Helvetica, sans-serif;
              color: #333;
    .Titl4eabus24 {
              font: bold 16px Tahoma, Geneva, sans-serif;
              color: #677E98;
              text-align: justify;
              font-weight: normal;
              font-size: 12px;
              font-family: Arial, Helvetica, sans-serif;
              font-style: normal;
    .bbstudy {
              font-weight: normal;
              font-family: Tahoma, Geneva, sans-serif;
              color: #000;
              font-size: 10px;
              font-style: normal;
    .bc {          font-family: Tahoma, Geneva, sans-serif;
              color: #000;
              font-weight: normal;
    .blackfont {          color: #000;
              font-size: 12px;
    .blackfont2 {color: #000;
              font-size: 12px;
    .blue2 {color: #000;
              font: normal 16px/normal Tahoma, Geneva, sans-serif;
    .blue2 {color: #000;
              font-size: 12px;
    .bluenew2 {          color: #3F75FF;
    .bluenice {
              color: #000;
              font-family: Arial, Helvetica, sans-serif;
              font-style: normal;
    .brown {          color: #06F;
              font-size: 10px;
    .churchaddresswhite {          font: normal 12px/normal Tahoma, Geneva, sans-serif;
              color: #FFF;
              font-family: Tahoma, Geneva, sans-serif;
    .dccaddress201121111 {font: normal 12px Tahoma, Geneva, sans-serif;
              color: #000;
    .dccaddress201121111 {color: #FFF;
              font-family: Tahoma, Geneva, sans-serif;
              font-size: 12px;
    .dccaddress2011212 {
              color: #FFF;
              font: normal 12px Tahoma, Geneva, sans-serif;
              font-family: Tahoma, Geneva, sans-serif;
    .dccaddress20113 {color: #666;
              font-family: Tahoma, Geneva, sans-serif;
    .englishfontnew {          color: #FFF;
              font: bold 10px Tahoma, Geneva, sans-serif;
              font-size: 14px;
              font-weight: normal;
              font-family: Tahoma, Geneva, sans-serif;
    .gray2 {color: #333;
    .gray2 {          color: #666;
              font-weight: normal;
    .gray2 {
              font-family: Tahoma, Geneva, sans-serif;
              font-style: normal;
    .newenglishtext {          font: bold normal 12px/normal Tahoma, Geneva, sans-serif;
              color: #000;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 12px;
              font-weight: normal;
    .newindextitleseng1 {font: normal 14px Tahoma, Geneva, sans-serif;
              text-transform: capitalize;
              color: #FFF;
              font-size: 12px;
    .newindextitleseng1 {
              color: #333;
              font-family: Tahoma, Geneva, sans-serif;
    .newtext1 {          color: #FFF;
              font: normal 14px Tahoma, Geneva, sans-serif;
              font-size: 12px;
    .nonboldariel1 {
              font-weight: normal;
              font-family: Arial, Helvetica, sans-serif;
              color: #000;
              font-style: normal;
    .nonboldariel2 {
              font-weight: normal;
              font-family: Arial, Helvetica, sans-serif;
              color: #000;
              font-style: normal;
    .orange {          color: #FE9900;
              font-weight: bold;
              font-style: italic;
    .red {          color: #F00;
    .s16 {          font-size: 16px;
              font-weight: normal;
              color: #583F2C;
              font-family: Tahoma, Geneva, sans-serif;
    .sermtitle01-04-12 {
              font-weight: normal;
              font-size: 12px;
              font-style: normal;
    .t {          font-family: Tahoma, Geneva, sans-serif;
              color: #000;
              font-weight: bold;
    .tahoma21 {color: #CCC;
    .whitetitle {
              color: #000;
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-style: normal;
              font-size: 12px;
    .whitetitle1 {
              color: #000;
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-size: 12px;
              font-style: normal;
    .englishfont strong {
              color: #FFF;
              font-weight: normal;
    .black {
              font-style: normal;
    .SIZE16 {
              font-style: normal;
    .Articles {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 12px;
              font-weight: normal;
              color: #000;
    .newtext11 {
              color: #FFF;
              font: normal 14px Tahoma, Geneva, sans-serif;
              font-size: 12px;
    .tahoma31 {text-align: justify;
    .tahoma31 {font: normal 14px/normal Tahoma, Geneva, sans-serif;
              color: #600;
              font-family: Tahoma, Geneva, sans-serif;
    .tahoma31 blockquote p {
              font-size: 12px;
              color: #333;
    .blackfont1 {color: #000;
              font-size: 12px;
    .bluenice1 {
              color: #000;
              font-family: Arial, Helvetica, sans-serif;
              font-style: normal;
    .nonboldariel11 {
              font-weight: normal;
              font-family: Arial, Helvetica, sans-serif;
              color: #000;
              font-style: normal;
    .nonboldariel21 {
              font-weight: normal;
              font-family: Arial, Helvetica, sans-serif;
              color: #000;
              font-style: normal;
    .welcome14 {          font-size: 14px;
              text-align: center;
    .whitetitle2 {
              color: #000;
              font-family: Arial, Helvetica, sans-serif;
              font-style: normal;
              font-size: 12px;
    .whitetitle11 {
              color: #000;
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-size: 12px;
              font-style: normal;
    a:link {
              text-decoration: none;
              color: #333;
    a:visited {
              text-decoration: none;
    a:hover {
              text-decoration: none;
    a:active {
              text-decoration: none;
              font-family: Tahoma, Geneva, sans-serif;
    .arielnew {
              font-family: Arial, Helvetica, sans-serif;

  • Linking Menu Bar with views in the same window

    Hi everyone,
    I have a menu bar in a view and I would like to link each one of the elements with other view through an URL. The problem when I do this is that the view appears in a different window and I want that appears in the same window. Because if it doesn't, I'm going to have one window for each element of the menu bar :s
    Thanks in advance!

    Hi,
    As per my understanding, your requriement is: (Correct me if i am wrong).
    You have one default View and Window. In the View you are displaying the menu bar. Each menu bar item contails one specific URL. When user clicks on any of the menu bar item you need to open the corresponding URL in the same View.
    1)  Take the view set with two rows. In first row add the default MenuView (menu bar) and in second row embed another View (For example: ResultView).
    2). In RestultView create IFrame UI element (Note : it is deprecated). And bind one cotext attribute to url.
    Map this context attribute to MenuView also throug the Component Controller.
    3). Create inbound plug to MenuView and outbound plug to ResultView. On click on any of the menubar items change the URL in the context attribute and then navigate to the ResultView through plugs.
    Regards,
    Charan

  • Displaying menu bar using ADF - JSF

    scenario:
    there's a tabbed menu.each tabbed menu has its own menu bar
    objective:
    the menu bar displays the links according to the tab selected.
    how can i do it? is there any way dat i can play around with ADF binding feature? like is it possible to set the render of bar items such that it displays the bar links intelligently [depending on the tab selected]
    or last but not least.. shud i use javascript!
    any reference to such example available online will be appreciated.
    regards,
    Rabs

    hello,
    you might want to read section 11.2. "Using dynamic menus for navigation" It's in the ADF developers guide you can find at the start page of JDeveloper (the studio version anyway).
    kind regards,
    Nemata

Maybe you are looking for