Spry submenu overlaying menu bar in IE

I created a simple Website using Spry vertical menus, which casade to the left. These work fine in Chrome and Firefox, but in IE the second level menu is rendered on top of the first level menu. Can someone please help me with this problem? My Website is at http://jdlipinski.iweb.bsu.edu/. Thanks in advance for any help

Have a look at the following. This uses links to adobe to ensure that we are using the default support files, but can be replaced by local files.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet">
<style>
ul.MenuBarVertical {
    float: right;
    width: 10em;
    border: none;
ul.MenuBarVertical li {
    width: auto;
    display: block;
    float: none !important;
ul.MenuBarVertical ul {
    margin: 0 0 0 -16em;
    width: 16em;
    border: none;
ul.MenuBarVertical ul li {
    text-align: right;
    width: 16em;
ul.MenuBarVertical a {
    background-color: transparent;
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus, ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible {
    background-color: transparent;
    color: #666;
ul.MenuBarVertical a.MenuBarItemSubmenu,
ul.MenuBarVertical a.MenuBarItemSubmenuHover {
    background-image: none;
</style>
<!--[if lt IE 10]>
<style>
ul.MenuBarVertical ul {
    margin: 1em 0 0 -16em;
</style>
<![endif]-->
<!--[if lt IE 8]>
<style>
ul.MenuBarVertical ul {
    margin: 0 0 0 -16em;
ul.MenuBarVertical ul li.MenuBarItemIE a {
    text-align: right;
</style>
<![endif]-->
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
      <li><a class="MenuBarItemSubmenu" href="#">design competition</a>
        <ul>
          <li><a href="gresham.html">Gresham Smith</a></li>
           <li><a href="icma.html">ICMA</a></li>
          <li><a href="kawneer.html">Kawneer</a></li>
        </ul>
      </li>
<li><a class="MenuBarItemSubmenu" href="#">design studio</a>
  <ul>
          <li><a href="csu.html">csu equine hospital</a></li>
           <li><a href="sugar.html">sugar factory redevelopment</a></li>
          <li><a href="transit.html">transit stop</a></li>
          <li><a href="school.html">high performance school</a></li>
          <li><a href="theater.html">theater apartments </a></li>
          <li><a href="energy.html">energy center</a></li>
          <li><a href="cabinet.html">cabinet studio</a></li>
          <li><a href="bank.html">urban bank</a></li>
          <li><a href="art.html">artistic community development</a></li>
          <li><a href="element.html">elemental community development</a></li>
        </ul>
  </li>
      <li><a class="MenuBarItemSubmenu" href="#">digital fabrication</a>
        <ul>
           <li><a href="1871.html">1871 </a></li>
          <li><a href="quilt.html">quilt panel</a></li>
          <li><a href="spiral.html">spiral pipe</a></li>
          <li><a href="organic.html">organic envelope</a></li>
          <li><a href="undulating.html">undulating surface</a></li>
        </ul>
       </li>
      <li><a class="MenuBarItemSubmenu" href="#">design build</a>
        <ul>
          <li><a href="build.html">exquisite corpse </a></li>
          <li><a href="hallway.html">hallway</a></li>
        </ul>
    </li>
       <li><a href="hand.html">hand rendering </a></li>
      <li><a href="paint.html">painting </a></li>
      <li><a href="aboutme.html">about me</a></li>
    </ul>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
</body>
</html>
Gramps

Similar Messages

  • Double horizontal spry drop down menu bar problems

    Hello Everyone,
    I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
    I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
                        css spry drop down menu 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;
                       css   spry drop down menu 2
    /* 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.adminbarh li.MenuBarItemIE
              display: inline;
              f\loat: left;
              background: #FFF;
    This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email.  Contact me at [email protected]
    See what I got here. www.prospectingtreasures.com

    Hello Everyone,
    I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
    I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
                        css spry drop down menu 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;
                       css   spry drop down menu 2
    /* 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.adminbarh li.MenuBarItemIE
              display: inline;
              f\loat: left;
              background: #FFF;
    This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email.  Contact me at [email protected]
    See what I got here. www.prospectingtreasures.com

  • How to Make a Non-Spry Drop Down Menu Bar?

    In Dreamweaver CS6, I'm building a Fluid Grid website. I'm trying to make a simple menu bar with 2 submenu items and 2 subsubmenu items. I was using Spry but found out that Spry is dead. So what do I use instead?

    First of all, if you are in a hurry, Project VII's Pop Menu Magic 3 is a great choice. Since it's a Dreamweaver plugin, making navigation is a snap. Just click on the PMM icon and start making.
    One does not need CSS3 for a drop-down menu structure—the necessary requirement to talk to a web browser is in CSS2. Also you do not need to load your website with jQuery—though I don't want to come across as "anti-jQuery."
    Here is a link to a complete tutorial on pure CSS drop-down navigation. There are dozens of others.
    The real secret is using position:relative, then position:absolute for the drop-down and hiding it by positioning it off-screen when not in use. This tutorial also uses some CSS3 for tablets and cell phones, though it is not required for desktops.
    You can take this a step further by hiding the entire navigation structure (and then revealing it) for cell phones with this tutorial. This will allow you to construct navigation for your website so that it will work for all devices.
    Please note, no jQuery is necessary in either of these tutorials.
    -Mark

  • Can't get the default spry drop down menu bar ??

    Every time I create a new drop down menu bar it comes up with one that has the same properties as the last one I created. And I can't fix that last one. I'd like to start over but DW won't let me. Help?

    If you are trying to insert a new menu bar with different properties than the last, for instance when you want to start over with a fresh styling approach, remember that the menubar css file will apply to all menus in the site, unless you distinguish the menus with an id on the containing element (div).
    Go ahead and delete the old css file from the SpryAssets folder, if you want to start over. When you insert the new menubar, a new css file will also be installed.
    You might find it useful to keep on hand (in a separate folder, out of the site folder) a 'clean' and new menubar css file, for use troubleshooting (by comparing the original with your edited version) or for copying into the site in this kind of situation. But if all  you want is a new original copy, just following my suggestion above will work.
    Beth

  • Trouble with Spry Menu Bar Not Opening on Hover

    I have two Spry Menu Bars on this one page. They were both working fine. Now the menu bar on the top right is not opening on rollover. I have uploaded the Spry .JS and .CSSfiles to the server.Could it be that I added 2 to the names of the CSS styles, but not all of them? I just tested them all with 2 after the style name, and it didn't fix it.
    I also noticed that the ability to edit these two navigation bars using the Property Inspector went away. I can't seem to click on them to edit. Now I edit them through the code only.
    Rebuild it on another page, and paste in the code?
    Suggestions?
    ALso, getting an error message on line 2 of HTML below, which I don't remember editing.
    I will paste the template page HTML, then the CSS, then the Javascript Spry file for Menu Bar Horizontal. I did not edit the JS file at all.
    Link to the uploaded files: http://www.sproulcreative.com/filetest/panin_website/
    Thanks for any help you can offer.
    D
    HTML for template page:
    <!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>Press Reviews of Paninos Italian Restaurant Food in three Colorado Locations</title>
    <!-- TemplateEndEditable -->
    <link href="../styles_paninositalianrestaurant.css" rel="stylesheet" type="text/css" />
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="../SpryAssets/SpryMenuBar_topnav.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="../SpryAssets/SpryMenuBarHorizontal_topnav.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- TemplateParam name="LinksSidebar" type="boolean" value="true" -->
    </head>
    <body>
    <div id="wrapper">
    <a href="#skiptomaincontent">
         <img src="../images/spacer.gif" alt="Skip to main page content" name="spacer" width="1"
    height="1" class="invisible" id="spacer">   </a><!--ANCHOR FOR SCREEN READERS-->
    <!--START TOP NAV DIV-->
    <div id="topnav">
    <!--START TWITTER/FACEBOOK MENU BAR -->
    <script type="text/javascript">
    <!--
    var MenuBar2 = new Spry.Widget.MenuBar("twittermenu", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    <ul id="twittermenu" class="MenuBarHorizontal2">
          <li><a href="../paninos_local_italian_restaurant_fort_collins_colorado_springs_minnesota.html">H ome</a></li>
          <li><a href="../reviews_italian_restaurant_food.html">Reviews</a></li>
          <li><a href="../history_of_paninos_local_italian_restaurant_coloradosprings_fortcollins_minnesot a.html">History</a></li>
          <li><a class="MenuBarItemSubmenu2" href="#">Twitter</a>
                      <ul>
                            <li><a href="http://twitter.com/Paninosfc">Follow Fort Collins, CO, Paninos</a></li>
                            <li><a href="http://twitter.com/paninosmn">Follow Minnesota Paninos</a></li>
                      </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu2">Facebook</a>
                <ul>
                      <li><a href="http://www.facebook.com/search/?q=Paninos&init=quick#/pages/North-Oaks-MN/Paninos/13234142 7180?v=wall&ref=search">Minnesota Twin Cities Four</a></li>
                </ul>
                </li>
    </ul>
    <!--END TWITTER/FACEBOOK MENU BAR-->
    </div>
    <!--ENDS TOP NAV DIV-->
    <div id="pagebg">
    <div id="centralpageborder"><!--FOR BORDER TRIM & BG color-->
    <!--START OF HEADERBOX-->
    <div id="headerbox">
          <div align="left">
                <img src="../images/web_logo_paninos_final.png" alt="Paninos Italian Restaurant Logo (black text with a tomato for the letter O), Your family's Italian restaurant for over 35 years, locally owned and operated." width="215" height="118" class="paddingbottom" />
    <!--START OF MAIN FOUR NAVIGATION -->
    <ul id="MainFourNav" class="MenuBarHorizontal">
          <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_mainnav_locations_contact.png" alt="Paninos Italian Restaurant Locations and Contact Information: Colorado Springs, Fort Collins, Minnesota" name="locationscontactbutton" width="167" height="24" border="0" id="locationscontactbutton" /></a>                 <ul>
                         <li><a href="../contact_info_italian_restaurant_fort_collins_colorado_paninos.html">Fort Collins, Colorado, by CSU</a></li>
                         <li><a href="../contact_info_italian_restaurant_colorado_springs_downtown_colorado_paninos.html" >Colorado Springs Downtown: Tejon St. by Colorado College</a></li>
    <li><a href="../contact_info_italian_restaurant_colorado_springs_8th_street_colorado_paninos.htm l">Colorado Springs: South Eighth St.</a></li>
                      <li><a href="http://paninos.com/minnesota/">Minnesota website</a></li>
                      </ul></li>
          <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_main4nav_download_menus.png" alt="Download Italian Restaurant Menus in PDF format for restaurants in Fort Collins, Colorado; Colorado Springs, Colorado; and Minnesota" name="menudownloadbutton" width="142" height="24" border="0" id="menudownloadbutton" /></a>
                <ul>
                      <li><a href="#"><em>Please pick your favorite Paninos:</em></a></li>
                      <li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Downtown.pdf">Color ado Springs Downtown: Tejon St. by Colorado College</a></li>
    <li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Eighth_Street.pdf"> Colorado Springs: South Eighth St.</a></li>
                      <li><a href="../online_menus_local_italian_food/Paninos_Menu_Fort_Collins_Colorado.pdf">Fort Collins, Colorado, by CSU</a></li>
                      <li><a href="http://paninos.com/minnesota/">Minnesota (go to website)</a></li>
                </ul>
          </li>
          <li><a href="../photo_gallery_pasta_dishes_pizza_italian_food.html"><img src="../images/img_main4nav_photo_gallery.png" alt="Photo Gallery of Local Italian Food including pizza and pasta" name="photogallery" width="56" height="24" border="0" id="photogallery" /></a> </li>
          <li><a href="../pizza_coupons_and_special_deals_italian_food.html"><img src="../images/img_main4nav_specials.png" alt="Pizza Coupons and Specials" name="pizzacouponsandspecials" width="71" height="24" border="0" id="pizzacouponsandspecials" /></a> </li>
    </ul>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MainFourNav", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>           
                <!-- TemplateBeginEditable name="HeaderPhotos" -->
                <p class="headerphotos"><img src="../images/imgheader_lasagna_beef_hot_cheesey_coloradosprings_fortcollins_italian_res taurant.png" width="263" height="133" /><img src="../images/imgheader_spinach_salad_with_chicken.png" width="263" height="133" /><img src="../images/imgheader_big-t-pizza2.png" width="263" height="133" /></p>
                <!-- TemplateEndEditable --></div>
    </div><!--ENDS HEADERBOX DIV-->
    <div id="bodybox"><!--BOX AROUND MAIN PAGE TEXT, FOR WHOLE PAGE BELOW HEADER AREA-->
    <div id="pagetitle"><!-- TemplateBeginEditable name="MainPageHeader" --><img src="../images/img_title_press_reviews_italian_restaurant.png" width="307" height="38" /><!-- TemplateEndEditable --></div><!--ENDS PAGE TITLE-->
    <div id="innerbdybox"><!--WRAPS ALL MAIN CONTENT BELOW BODYBOX TITLE, all 3 columns -->
    <div id="content"><!--WRAPS MAINTEXT AND PHOTO SIDEBAR COLUMNS-->
    <div id="maintext"><!--MAINTEXT OR BODY CONTENT OF P-->
    <!-- TemplateBeginEditable name="BodyTextSection" -->
    <a name="skiptomaincontent" id="skiptomaincontent"></a><!--ANCHOR FOR SCREENREADERS-->
    <h1>A Tradition Food And Sports: <br />
                            CC &amp; Panino’s Love of Hockey Runs From Colorado to Minnesota</h1>
          <h4>Byline: By Jim Bainbridge, The Gazette</h4>
          <p>No Colorado Springs business has had a deeper bond with the Colorado College hockey program during the past three decades than Panino’s Restaurant, a connection seen on its walls, in its clientele and in its bloodlines.<br />
                Panino’s has been tied to the school’s hockey program since the restaurant was bought in 1974 by former CC All-America hockey player Tony Frasca. It’s still the place to be on game day a generation later with his son Mike running things. <a href="http://daily.gazette.com/Repository/ml.asp?Ref=VGhlR2F6ZXR0ZS8yMDA1LzAzLzI5I0FyMDMzMDI=&Mo de=HTML&Locale=english-skin-custom"><span class="smalltext">Click here to view entire article.</span></a><br />
    <span class="smalltext">(Reprinted with permission of The Gazette)</span></p>
          <!-- TemplateEndEditable --> </div>
    <!--ENDS MAINTEXT DIV-->
          <div id="photosidebar">
                <!--STARTS PHOTO SIDEBAR DIV-->
                <!-- TemplateBeginEditable name="PhotoSidebar" --><img src="../images/img_waiter1_pizza_lasagna.png" alt="Happy waiter serving Pizza and Lasagna" width="190" height="158" /> <br />
                <img src="../images/img_panino_italian_grinder_sandwich.png" alt="Grinder Hot Italian Sandwich called a Panino" width="190" height="158" /><!-- TemplateEndEditable --></div>
          <!--ENDS PHOTOSIDEBAR DIV-->
    </div><!--ENDS #CONTENT DIV THAT ENCLOSES 2 COLUMNS- MAINTEXT AND PHOTOSIDEBAR-->
          <!-- TemplateBeginIf cond="_document['LinksSidebar']" --><!-- TemplateBeginEditable name="EditRegion3" -->
    <div id="linkssidebar"><!--START LEFT LINKSSIDEBAR DIV--> 
            <p>The Gazette<br />
                The Coloradoan<br />
                The North Forty News<br />
                Colorado Springs Times</p>
    </div><!--ENDS LINKSSIDEBAR DIV-->
    <!-- TemplateEndEditable --><!-- TemplateEndIf -->
    </div><!--ENDS INNERBODYBOX DIV THAT WRAPS ALL 3 COLUMNS BELOW THE HEADER -->
    <div id="footer"> </div><!--CLEARS CONTENT BEFORE LOWER CONTENT BORDER-->
    <br />
    <br />
    </div> <!--****ENDS BODYBOX DIV THAT ENCLOSES PAGE HEADER BELOW "HEADER" AREA,INNERBODYBOX (FOR ALL 3 COLUMNS OF CONTENT), and FOOTER DIV (TO CLEAR CONTENT) . MOVING THIS AFER THE LINKKSIDEBAR SEEMED TO MAKE IT ALGIN CORRECTLY. PUTTNG AFTER THE PHOTOSIDEBAR MADE THE MAINTEXT HAVE SCROLL BAR-->
    </div><!--ENDS CENTRALPAGEBORDER DIV-->
    </div><!--ENDS PAGEBG DIV-->
    </div><!--ENDS WRAPPER TO MAKE PAGE LEFT JUSTIFY -->
    </body>
    </html>
    CSS for Spry Menu Bar:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* 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.MenuBarHorizontal2
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        /*margin-top: -10px; */
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0px;
        padding-top: 0;
        padding-bottom: 0;
    /* 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.MenuBarHorizontal2 li
        list-style-type: none;
        font-size: 95%;
        position: relative;
        text-align: left;
        cursor: pointer;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    /* 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.MenuBarHorizontal2 ul
        margin: 0;
        padding: 0;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal2 ul.MenuBarSubmenuVisible
        left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal2 ul li
        width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal2 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal2 ul
        border: 1px solid #9E2532;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal2 a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: #F3E8CC;
        text-decoration: none;
        background-color: #663300;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal2 a:hover, ul.MenuBarHorizontal2 a:focus
        color: #FFF;
        background-color: #663300;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal2 a.MenuBarItemHover, ul.MenuBarHorizontal2 a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal2 a.MenuBarSubmenuVisible
        color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal2 a.MenuBarItemSubmenu2
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenu2
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 100% 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.MenuBarHorizontal2 iframe
        position: absolute;
        z-index: 1010;
    /* 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.MenuBarHorizontal2 li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    JAVASCRIPT FILE FOR MENU BAR HORIZONTAL:
    /* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    SpryMenuBar.js
    This file handles the JavaScript for Spry Menu Bar.  You should have no need
    to edit this file.  Some highlights of the MenuBar object is that timers are
    used to keep submenus from showing up until the user has hovered over the parent
    menu item for some time, as well as a timer for when they leave a submenu to keep
    showing that submenu until the timer fires.
    var Spry;
    if(!Spry)
        Spry = {};
    if(!Spry.Widget)
        Spry.Widget = {};
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a menu
    Spry.Widget.MenuBar = function(element, opts)
        this.init(element, opts);
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
        this.element = this.getElement(element);
        // represents the current (sub)menu we are operating on
        this.currMenu = null;
        var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
        if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
            // bail on older unsupported browsers
            return;
        // load hover images now
        if(opts)
            for(var k in opts)
                var rollover = new Image;
                rollover.src = opts[k];
        if(this.element)
            this.currMenu = this.element;
            var items = this.element.getElementsByTagName('li');
            for(var i=0; i<items.length; i++)
                this.initialize(items[i], element, isie);
                if(isie)
                    this.addClassName(items[i], "MenuBarItemIE");
                    items[i].style.position = "static";
            if(isie)
                if(this.hasClassName(this.element, "MenuBarVertical"))
                    this.element.style.position = "relative";
                var linkitems = this.element.getElementsByTagName('a');
                for(var i=0; i<linkitems.length; i++)
                    linkitems[i].style.position = "relative";
    Spry.Widget.MenuBar.prototype.getElement = function(ele)
        if (ele && typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
        if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
            return false;
        return true;
    Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
        if (!ele || !className || this.hasClassName(ele, className))
            return;
        ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
        if (!ele || !className || !this.hasClassName(ele, className))
            return;
        ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    // addEventListener for Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent('on' + eventType, handler);
        catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
    Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
        var layer = document.createElement('iframe');
        layer.tabIndex = '-1';
        layer.src = 'javascript:false;';
        menu.parentNode.appendChild(layer);
        layer.style.left = menu.offsetLeft + 'px';
        layer.style.top = menu.offsetTop + 'px';
        layer.style.width = menu.offsetWidth + 'px';
        layer.style.height = menu.offsetHeight + 'px';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
        var layers = menu.parentNode.getElementsByTagName('iframe');
        while(layers.length > 0)
            layers[0].parentNode.removeChild(layers[0]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (<ul> tag)
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
        var menus = root.getElementsByTagName('ul');
        for(var i=0; i<menus.length; i++)
            this.hideSubmenu(menus[i]);
        this.removeClassName(this.element, "MenuBarActive");
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
        if(this.currMenu)
            this.clearMenus(this.currMenu);
            this.currMenu = null;
        if(menu)
            this.addClassName(menu, "MenuBarSubmenuVisible");
            if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
                if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
                    menu.style.top = menu.parentNode.offsetTop + 'px';
            if(typeof document.uniqueID != "undefined")
                this.createIframeLayer(menu);
        this.addClassName(this.element, "MenuBarActive");
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
        if(menu)
            this.removeClassName(menu, "MenuBarSubmenuVisible");
            if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
                menu.style.top = '';
                menu.style.left = '';
            this.removeIframeLayer(menu);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = false;
        if(menu)
            this.addClassName(link, "MenuBarItemSubmenu");
            hasSubMenu = true;
        if(!isie)
            // define a simple function that comes standard in IE to determine
            // if a node is within another node
            listitem.contains = function(testNode)
                // this refers to the list item
                if(testNode == null)
                    return false;
                if(testNode == this)
                    return true;
                else
                    return this.contains(testNode.parentNode);
        // need to save this for scope further down
        var self = this;
        this.addEventListener(listitem, 'mouseover', function(e)
            if(self.bubbledTextEvent())
                // ignore bubbled text events
                return;
            clearTimeout(closetime);
            if(self.currMenu == listitem)
                self.currMenu = null;
            // show menu highlighting
            self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
            if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
                opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
        }, false);
        this.addEventListener(listitem, 'mouseout', function(e)
            if(self.bubbledTextEvent())
                // ignore bubbled text events
                return;
            var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
            if(!listitem.contains(related))
                clearTimeout(opentime);
                self.currMenu = listitem;
                // remove menu highlighting
                self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
                if(menu)
                    closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
        }, false);

    It has to do with all of your absolutely positioned elements.  What's happening is that the menu is falling behind the absolutely positioned elements on your page.  Since there is nothing there, it's like trying to click a link that is outside your home while you are staring through a window.  Personally with that page setup you have now I really don't see a need for absolutely positioned elements.  But if you feel you will require them as part of your design you need to ensure the z-index of your menu layer is greater than that of the body elements positioned below it.

  • Vertical spry menu bar 2.0 - orientation of submenus (left vs. right fly-out)

    Hello:
    I have a general question I would like to pose to anyone who has worked with the vertical spry 2.0 menu bar regarding the orientation of sub-menus (left vs. right flyout).  In the previous version of the spry menu bar it was possible to to designate that the flyout sub-menus would appear to the left (as opposed to the right (normal or standard position) of the main level menu bar.
    In reviewing the tutorials for the new version, and reviewing the settings for the widget I can't seem to see anything similar for the latest version of the spry menu bar.  Does anyone now if this is possible?  Does it require adjustments to the Javascript or can it be done directly from within the widget customization.
    I realize that it isn't normal practice to pose questions in such general terms, however I thought I would try to determine if anyone has had experience in this regard before launching into the project.
    Thanks in advance.
    Steve Webster

    OK, here's what I've done. By adjusting the right padding on #MenuBarVertical .MenuItem .MenuItemLabel, AND #MenuBarVertical .SubMenu .MenuItem .MenuItemLabel, I was able to position the right arrows to where I wanted them. I also removed all links from top-level menu items so that the fly-out submenus would appear on a touch screen. You can see the results on my client site: www.gcssepm.org. I must say that this solution was not intuitive; it took a lot of experimentation to figure out which rule to adjust, and menu rules vs. submenu rules seem to operate in the opposite manner as far as padding and arrows go.
    I do have a similar issue with Scott, in that it takes two or more "taps" to get the submenus to fly out, but at least the arrow is there so the user knows there is a submenu to be had. The only real issue I still have is that for sub-submenus (i.e., third-level), no amount of tapping will get those to display long enough to select them (only an issue on the iPad). I don't know a way around this for the iPad, other than to also eliminate all links from second-level menus that have a third level, and that's more reprogramming than I want to do for today.
    Final questions regarding the Spry 2.0 widget. Obviously, after I customized the widget, saved it, and imported into my site template, it took some additional tweaking before everything was working properly. Is there a way to export the settings back out to the widget, so that all the tweaking is there? Also, is there a way to save my menu text back to the widget, because it is obviously NOT Home, Entertainment, Music, etc.
    Thanks for all your help, and I hope someone else benefits from my experiences as well.
    Gail

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

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

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

  • HOW DO I USE 'SPRY MENU BAR?'

    Please i need an indept explanation of how to use spry to create menu bars to my satisfaction. Your useful information shall be highly appreciation. Thanks!

    Spry menus have been deprecated and, if you are using an older version of Spry, it will not work on Mobile!
    So don't.
    You can do drop-down menus with rollover effects and everything simply by using straight HTML and CSS. You do have to know HTML and CSS though. Another great way to simply use a plugin is to go to Project Seven and buy their system (there are others out there, but the guys at PVII are particularly crafty and their menu systems work with all browsers, including the really bad Microsoft ones).
    Here is a link to a tutorial that will show you how to do a straight HTML and CSS3 dropdown menu yourself.

  • To all Menu Bar users!

    We know that the Spry 1.6 menu bar is very problematic.
    To solve this we made Menu Bar 2.0 a high priority with the new Spry UI release.
    While it might look the same, it has been completely rewritten and it hopefully will solve a vast number of issues you are having.
    It is available through the Widget Browser http://labs.adobe.com/technologies/widgetbrowser/
    which provides a GUI for you to begin styling it.
    Check it out and give us some feedback on it!
    Thanks,
    Donald Booth
    Adobe Web Frameworks Team

    I found the Spry Menu Bar 2.0 a great improvement over the prior version.  However, I'm having a problem that may have general applicability so I'm writing to you directly before posting a question on the Forum.
    The Spry Menu bar 2.0 I on my site (www.stampproofs.com) appears uncollapsed (i.e. both the main and submenus are visible) for about 1 second when the site loads slowly due to heavy internet traffic.  Otherwise it works fine.  The slow connection problem appears to relate to my being in Singapore and the hosting server being in the US and only happens at certain times of the day (we did some tests on this with my hosting company), so maybe US users won’t have this problem. 
    Is this a problem that others have experienced and is there anything I can do with the JavaScript (which I don’t yet know how to program) to fix this?
    In case it's relevant, the problem occurs in both IE8 and Firefox 3.6, I'm using Windows 7, I have a high-speed internet connection (100Mbps download speed and up to 30Mbps "international bandwidth" speed) and I'm not using a firewall.

  • Spry menu bar woes (add submenu levels and edit width)

    So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at  my wit's end fo this one.  So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise:  when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
    <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers &amp; mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>
    the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code?  i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull.  Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
    HTML code for the menu:
    <tr>     <td><ul id="MenuBar1" class="MenuBarHorizontal">       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>         <ul>           <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers &amp; mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>               <li><a href="#">music Sources</a></li>               <li><a href="#">amplifiers</a></li>               <li><a href="#">paging</a></li>               <li><a href="#">speakers</a></li>               <li><a href="#">microphones</a></li>             </ul>           </li>           <li><a href="#">racks and stands</a></li>           <li><a href="#">cables</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a>         <ul>           <li><a href="#">Who are we?</a></li>           <li><a href="#">history</a></li>   <li><a href="#">contact us</a></li>   <li><a href="#">philosophy</a></li>   <li><a href="#">careers</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a>         <ul>           <li><a href="#">catalogs</a>            </li>           <li><a href="#">manuals</a></li>           <li><a href="#">software</a></li>           <li><a href="#">documents</a></li>           <li><a href="#">pricelists</a></li> </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li>     </ul></td>
    sprymenuhorizontal.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: 14px;      cursor: default;      width: 1010px;      font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ 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;      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 {      list-style-type: none;      font-size: 100%;      z-index: 1020;      cursor: default;      width: 166px;      position: absolute;      left: -1000em;      background-color: #6C6C6C;      height: 0px;      margin-top: 0px;      margin-right: 0em;      margin-bottom: 10px;      margin-left: 0em;      text-align: right;      text-indent: 0em;      padding-top: 0px;      padding-right: 0em;      padding-bottom: 0px;      padding-left: 0px;      border-top-width: 1px;      border-right-width: 1px;      border-bottom-width: 1px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #666;      border-right-color: #666;      border-bottom-color: #666;      border-left-color: #666; } /* 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;      height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      height: 41px;      margin-top: 0%;      margin-right: 0%;      margin-bottom: 0px;      margin-left: 162px;      float: right; } /* 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 #666;      background-color: #6C6C6C;      height: 0px;      padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #6C6C6C;      padding: 0em;      color: #FC0;      text-decoration: none;      font-size: 14px;      margin-left: 0em; } /* 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: #FC0;      color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {      background-color: #FC0;      color: #FFF; }  /*******************************************************************************   SUBMENU INDICATION: styles if there is a submenu under a given menu item   *******************************************************************************/  /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarDown.gif);      background-repeat: no-repeat;      background-position: 98% 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: 98% 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: 98% 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: 98% 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;      } }[/SPOILER]  any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...

    since the layout of the pasted text got all weird, here i'm trying it again.
    sprymenubarhorizontal.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: 14px;
    cursor: default;
    width: 1010px;
    font-family: Arial, Helvetica, sans-serif;
    /* 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;
    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
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 166px;
    position: absolute;
    left: -1000em;
    background-color: #6C6C6C;
    height: 0px;
    margin-top: 0px;
    margin-right: 0em;
    margin-bottom: 10px;
    margin-left: 0em;
    text-align: right;
    text-indent: 0em;
    padding-top: 0px;
    padding-right: 0em;
    padding-bottom: 0px;
    padding-left: 0px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
    /* 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;
    height: 0px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 166px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    height: 41px;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0px;
    margin-left: 162px;
    float: right;
    /* 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 #666;
    background-color: #6C6C6C;
    height: 0px;
    padding-left: 0em;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #6C6C6C;
    padding: 0em;
    color: #FC0;
    text-decoration: none;
    font-size: 14px;
    margin-left: 0em;
    /* 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: #FC0;
    color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #FC0;
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 98% 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: 98% 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: 98% 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: 98% 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;

  • Spry Menu Bar Submenu won't show in Safari or Dreamweaver LiveView

    I am trying to get my submenu to show up on my website's spry menu bar. It will show up when I test the site using firefox or IE but it won't show when I try LiveView in Dreamweaver or when I test using Safari. The site is www.fuseut.com/fuse
    Here are is the CSS for the menubar:
    @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: 125px;      float: left;      font-family: "MS Serif", "New York", serif;      overflow: visible; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      z-index: 50;      cursor: default;      width: 7em;      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: 7em; } /* 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: 0;      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;      padding: 0.5em 0.75em;      color: #FFF;      text-decoration: none;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;      text-align: center;      background-image: url(../menubgdefault.png); } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      color: #FFF002;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {      color: #FFF002;      text-decoration: underline;      font-weight: bold; } /******************************************************************************* 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%;      background-color: #999; } /* 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;      } }
    And here is the HTML 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" xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>FUSE UT</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <script src="SpryAssets/xpath.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #apDiv1 {
         position:absolute;
         left:0px;
         top:135px;
         width:551px;
         height:269px;
         z-index:2;
         visibility: visible;
    #apDiv2 {
         position:absolute;
         left:685px;
         top:150px;
         width:203px;
         height:270px;
         z-index:1;
    #apDiv3 {
         position:absolute;
         left:684px;
         top:149px;
         width:200px;
         height:267px;
         z-index:2;
    #HomeEvents {
         position:fixed;
         left:683px;
         top:151px;
         width:200px;
         height:263px;
         z-index:1;
         background-image: url(Components/EventsPic.png);
         visibility: visible;
         overflow: hidden;
    #HomeEvents {
         position:absolute;
         left:550px;
         top:-1px;
         width:200px;
         height:265px;
         z-index:2;
    #EventsXML {
         position:absolute;
         left:1px;
         top:43px;
         width:199px;
         height:223px;
         z-index:3;
         visibility: visible;
         overflow: scroll;
    #apDiv4 {
         position:absolute;
         left:-1px;
         top:265px;
         width:753px;
         height:325px;
         z-index:3;
         background-image: url(home1.png);
    -->
    </style>
    <script type="text/javascript">
    <!--
    var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
    var event2 = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "ascending"});
    event2.setColumnType("date", "date");
    //-->
    </script>
    <meta name="Keywords" content="fuse ut utk university of tennessee tommy jervis avery howard ross rowland angie sessoms sga campaign elections" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    </div>
    <div id="menubarparent" style="z-index: 20; position: absolute; overflow: visible;">
    <div id="menubar" style="z-index: 10;">
    <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html">FUSE</a>      </li>
        <li><a href="senators.html" class="MenuBarItemSubmenu">Senators</a>
          <ul>
            <li><a href="#">Untitled Item</a></li>
          </ul>
        </li><li><a href="executive.html">Executive</a>      </li>
        <li><a href="policy.html">Policy</a></li>
        <li><a href="organizations.html">Organizations</a></li>
        <li><a href="bios.html" class="MenuBarItemSubmenu">Bios</a>
          <ul>
            <li><a href="#">Untitled Item</a></li>
          </ul>
        </li>
      </ul>
      </div>
      </div>
      <p>
      <p>
      <div id="apDiv1">
        <div id="apDiv4"></div>
        <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="265" wmode="transparent">
          <param name="movie" value="Components/CandidatesHomeSlideshow.swf" />
          <param name="quality" value="high" />
           <param name="wmode" value="transparent" />
          <param name="swfversion" value="6.0.65.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="Components/CandidatesHomeSlideshow.swf" width="550" height="265" wmode="transparent">
            <!--<![endif]-->
            <param name="quality" value="high" />
              <param name="wmode" value="transparent" />
            <param name="swfversion" value="6.0.65.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object><div id="HomeEvents">
          <p> </p>
          <p> </p>
          <div id="EventsXML">
            <div spry:region="event2">
              <dl spry:repeatchildren="event2">
                <dt>{date}</dt>
                <dd>{title}</dd>
                <dd>{location}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    swfobject.registerObject("FlashID");
    //-->
    </script>
    </body>
    </html>
    Sorry if it's something really basic...I'm a noob to web design.
    Thanks!

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

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

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

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

  • Help with vertical spry menu bar submenu displaying incorrectly!

    I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
    Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
    Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
    How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

    IE is a big problem child among browsers.  Don't use it as your default browser.
    For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera.   If it works in one, it should work pretty much the same in all of them.
    After you're satisfied with how your site looks in the good browsers, then test in IE.  If needed, add hacks or conditional comments to make IE behave.  There are many web sites that discuss known bugs in IE and how to work around them.
    Lastly, the active X nag screens only appear locally.  Once deployed on the remote server, you won't see them.
    For better answers to your layout questions, we need to see your page.  Can you post a URL?
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Add third level submenu to spry menu bar

    I want to add a third level submenu to my Horizontal Spry
    Menu Bar. I have read that I cannot do this in design mode but
    rather have to program it in using the code view. Does anyone know
    how to accomplish this? Thanks so much!

    Its OK! I've just found an answer:
    http://forums.adobe.com/message/1049136#1049136
    PS. I did searching before I posted - but I didn't spot this till afterward

  • Spry menu bar submenu disappears when cursor changes

    Hello.
    I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
    Can anyone tell me how to prevent that from happening?

    LICAP Webmaster wrote:
    Can anyone tell me how to prevent that from happening?
    Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
    If you put your test page and all dependent files online, and post a link here, we will gladly check that:
        Your server is working
        That all required HTML code is correct
        That your folder hierarchy is correct
        That all required dependent files  (HTML, CSS, JS, Images etc.) are uploaded to proper folders
        That Javascript Versions are correct
        That link paths are all correct and case sensitive
    Sounds like your submenus may be positioned with a small gap from your top-level links

Maybe you are looking for