Horizontal Submenus?

Background: I'm new to using spry widgets.
I want to have a horizontal menu bar (no problem), but with
horizontal submenu bars which left-align to their parent menu
item.

Hi,
Please refer to the following link http://forums.adobe.com/message/6208552#6208552
Regards,
Aish

Similar Messages

How do I add mutiple horizontal submenus to one menu label.

For Muse, how do I add mutiple horizontal submenus to one menu label. In other words, I have Interior,Graphic and Web as one menu. Under Interior I want a horizontal submenu with Kitchens, bathrooms, closets,etc. Then under Kitchens I may want Bars, Islands and pantries.. Windows 7.

In plan view drag all of the pages you want in a submenu under the page you have set for the top level menu. So in your situation you would want kitchens, bathrooms, clostets etc under the interior page in plan view.

Vertical & Horizontal Submenus Do Not Appear in IE 7

Both the vertical and horizontal submenus of my Spry menu bars do not appear on hover, although other parent menu items (without submenus) do highlight on hover. The menus work fine in Safari and Firefox. I appreciate any assistance anyone can provide.
I have tried all the various solutions from help sites to no avail. I have also updated my Spry assets in Dreamweaver CS4 and used the recommended IE browser hacks. After many iterations, I got both main/parent menus to appear in the correct positions in IE 7, but the submenus will not drop right or down.
Attached is the link to my homepage:
http://www.leadermarkproperties.com/homepage.html
Following is the SpryMenuBarVertical.css (followed by the source code for the homepage):
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
font-size: 100%;
width: 140px;
left: 0px;
top: 110px;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px;
z-index: 1000;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
font-size: 100%;
list-style-type: none;
position: relative;
margin: 0px;
padding: 0px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
list-style-type: none;
font-size: 100%;
cursor: default;
left: -980px;
position: absolute;
top: 0px;
z-index: 1020;
margin-left: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 140px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
cursor: pointer;
background-color: #6B629B;
color: #ECE6E0;
text-decoration: none;
font-family: Arial;
font-size: 8pt;
text-align: center;
font-weight: normal;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ECE6E0;
vertical-align: middle;
height: 30px;
display: block;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #33C;
color: #ECE6E0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #33C;
color: #ECE6E0;
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.MenuBarVertical a.MenuBarItemSubmenu
background-color: #6B629B;
background-position: 100% 100%;
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-color: #6B629B;
background-position: 100% 100%;
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
background-color: #6B629B;
color: #ECE6E0;
display: block;
f/loat: left;
font-family: Arial;
font-size: 8pt;
Following is the source code for the homepage):
<!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>Leadermark Home Page</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</style>
</head>
<body>
<div id="master">
<div id="apDivdownload">
<form><input type="button" value="Download" class="downloadbutton" onClick="window.location.href='leadermarkbrochure.pdf'"></form></div>
<div id="apDivcopyright"> © 2011 All rights reserved<br />
Leadermark Properties, LLC</div>
<div id="apDivnavfooter"><a href="sitemap.html">Site Map</a>   |  <a href="whyleadermark.html">Leadermark Commitment</a>   |  <a href="homepage.html">About Leadermark</a>   |   <a href="devinvexpertise.html">Development & Investment</a>   |   <a href="serviceslandingpage.html">Advisory & Consulting Services</a>   |   <a href="brokeragexpertise.html">Brokerage</a>   |   <a href="loginform.html">Clients & Investors</a>   |   <a href="feedback_form.html">Contact</a> </div>
    <div id="apDivheader">About Leadermark:<br />Diverse Skills, Experience & Perspective of<br />Real Estate Investment, Development & Brokerage</div>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv5"></div>
<div id="apDiv7"></div>
<div id="apDiv8"></div>
<div id="apDiv9"></div>
<div id="apDiv10"></div>
<div id="apDiv11"></div>
<div id="apDiv12"></div>
<div id="apDiv13"></div>
<div id="apDiv14"></div>
<div id="apDiv15"></div>
<div class="homepageboxlabel" id="apDiv16">Land Development</div>
<div class="homepageboxlabel" id="apDiv18">Build-To-Suit</div>
<div class="homepageboxlabel" id="apDiv19">Master-Planned Communities</div>
<div class="homepageboxlabel" id="apDiv20">Mixed-Use</div>
    <div class="homepageboxlabel" id="apDiv21">Office</div>
    <div class="homepageboxlabel" id="apDiv22">Industrial</div>
    <div class="homepageboxlabel" id="apDiv23">Residential & Homebuilding</div>
    <div class="homepageboxlabel" id="apDiv24">Construction & Engineering</div>
    <div class="homepageboxlabel" id="apDiv25">Development Management</div>
    <div class="homepageboxlabel" id="apDiv26">Investment & Asset Management</div>
    <div class="homepageboxlabel" id="apDiv27">Brokerage</div>
    <div class="homepageboxlabel" id="apDiv28">Retail</div>
    <div class="homepageboxlabel" id="apDiv29">Leadermark Properties is a diversified real estate development, investment, brokerage, and services firm, providing its clients and investors the benefit of broad perspective and extensive experience in the creation of real estate value. Leadermark’s paradigm<br />for success is disciplined leadership with focus on the countless details of value generation.</p><p>Optimal value in the development, investment, and brokerage processes can only be achieved by those with diverse experience, perspective, and leadership skills supporting persistent and effective attention to the people, processes, and factors that can erode value. Our expertise spans the full spectrum of the real estate field: development, investment, construction, asset management, and brokerage; and our experience encompasses all types of property: office, industrial, retail, residential, and land development.</p>
    </div>
<div id="servicesvisionmantra">V i s i o n • P e r s p e c t i v e • L e a d e r s h i p</div>
<div id="leadermarkbrochure">LEADERMARK BROCHURE</div>
<ul id="MenuBar5" class="MenuBarVertical">
<li class="MenuBarVertical"><a href="#" class="MenuBarItemSubmenu">Vision, Perspective, Leadership</a>
<ul>
    <li><a href="theparadigm.html">The Paradigm of Real Estate Development & Investment</a></li>
    <li><a href="thevision.html">The Vision</a></li>
    <li><a href="therisks.html">The Risks</a></li>
    <li><a href="themythofthedeal.html">The Myth of "The Deal"</a></li>
    <li><a href="thechallenge.html">The Challenge</a></li>
    <li><a href="whowilllead.html">Who WIll Lead?</a></li>
<li><a href="lmwilllead.html">Leadermark Will Lead</a></li>
<li><a href="onleadership.html">On Business Leadership</a></li>
</ul>
</li>
<li><a href="whyleadermark.html">Why Leadermark?</a></li>
<li><a href="lmwillplan.html">Leadermark Will Plan</a>    </li>
      <li><a href="lmwillmanage.html">Leadermark Will Manage</a>    </li>
      <li><a href="lmwillcommunicate.html">Leadermark Will Communicate</a></li>
<li class="MenuBarVertical"><a href="devinvexpertise.html" class="MenuBarItemSubmenu">Diverse Development & Investment Expertise</a>
        <ul>
          <li><a href="devinvexpertise.html">Overview</a></li>
          <li><a href="officeexpertise.html">Office</a></li>
          <li><a href="industrialexpertise.html">Industrial</a></li>
          <li><a href="retailexpertise.html">Retail</a></li>
          <li><a href="landdevelopmentexpertise.html">Land Development</a></li>
          <li><a href="residentialexpertise.html">Residential</a></li>
          <li><a href="lbeexpertise.html">Location-Based Entertainment</a></li>
        </ul>
    </li>
      <li class="MenuBarVertical"><a href="diverseskills.html">Diverse Development & Investment Skills</a>    </li>
      <li class="MenuBarVertical"><a href="diversetechlexpertise.html" class="MenuBarItemSubmenu">Diverse Technical, Planning & Construction Expertise</a>
        <ul>
          <li><a href="diversetechlexpertise.html">Overview</a></li>
          <li><a href="planningexpertisetable.html">Planning & Design Management</a></li>
          <li><a href="aeexpertisetable.html">Architectural Engineering</a></li>
          <li><a href="constructionexpertisetable.html">Construction</a></li>
          <li><a href="structuralexpertisetable.html">Structural Engineering</a></li>
        </ul>
      </li>
      <li><a href="news1.html">Leadermark News</a></li>
      <li><a href="casestudies1.html">Case Studies</a></li>
      <li><a href="currentopportunities1.html">Current Opportunities</a></li>
      <li><a href="currentproperties1.html">Current Properties</a></li>
      <li><a href="currentprojects1.html">Current Projects</a></li>
</ul>
<div id="#servicesheader"></div>
<div class="logoboxcontroller" id="logo"></div>
<div id="LMPname">Leadermark Properties</div>
<div class="logoboxcontroller" id="logo"></div>
<div class="boxcontroller" id="services"></div>
<div id="ServicesHeaderText">Real Estate Development & Investment • Consulting & Advisory Services • Brokerage</div>
<div class="inforbarboxcontroller" id="infobar"></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li class="MenuBarHorizontal" name="aboutleadermark">
      <div align="center"><a class="MenuBarItemSubmenu" href="#">The Leadermark Commitment</a>
        <ul>
          <li>
            <div align="center"><a href="theparadigm.html">Vision & Perspective</a></div>
          </li>
          <li>
            <div align="center"><a href="whyleadermark.html">Expertise</a></div>
          </li>
          <li>
            <div align="center"><a href="background.html">Leadership</a></div>
          </li>
        </ul>
      </div>
    </li>
    <li class="MenuBarHorizontal">
      <div align="center"><a href="homepage.html">About Leadermark</a></div>
    </li>
    <li class="menutextfont">
      <div align="center"><a class="MenuBarItemSubmenu" href="devinvexpertise.html">Development & Investment </a>
        <ul>
          <li>
            <div align="center"><a href="devinvexpertise.html">Expertise</a></div>
          </li>
          <li>
            <div align="center"><a href="serviceslandingpage.html">Services</a></div>
          </li>
          <li>
            <div align="center"><a href="currentprojects1.html">Current Projects</a></div>
          </li>
          <li>
            <div align="center"><a href="currentopportunities1.html">Current Opportunities</a></div>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <div align="center"><a href="serviceslandingpage.html">Advisory & Consulting Services</a></div>
    </li>
    <li>
      <div align="center"><a href="brokeragexpertise.html" class="MenuBarItemSubmenu">Brokerage</a>
        <ul>
          <li class="MenuBarHorizontal">
            <div align="center"><a href="brokeragexpertise.html">Expertise</a></div>
          </li>
          <li>
            <div align="center"><a href="acqdisposervices.html">Services</a></div>
          </li>
          <li>
            <div align="center"><a href="currentproperties1.html">Current Properties</a></div>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <div align="center"><a href="loginform.html">Clients & Investors</a></div>
    </li>
    <li>
      <div align="center"><a href="feedback_form.html" class="MenuBarHorizontal">Contact</a></div>
    </li>
</ul>
</div>
<div class="boxcontroller" id="body"></div>
<div id="logoboxholder"></div>
<div class="quotes" id="quotesbox"></div>
<script type="text/javascript">
</script>
</div>
</body>
</html>
Following is the SpryMenuBarHorizontal.css for the homepage:
@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: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 980px;
height: 40px;
top: 60px;
position: absolute;
z-index: 1000;
left: 0px;
/* 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: 140px;
float: left;
font-family: Arial;
top: 0px;
/* 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: 5000;
cursor: default;
width: 140px;
position: absolute;
left: -1000em;
background-color: #7D7469;
top: 35px;
/* 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
position: relative;
left: 0px;
top: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 140px;
font-family: Arial;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
/* 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: 0px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #ECE6E0;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #7D7469;
color: #ECE6E0;
text-decoration: none;
font-family: Arial;
font-size: 9pt;
height: 35px;
padding-top: 0.5em;
padding-right: 0.75em;
/* 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: #33C;
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: #33C;
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-color: #7D7469;
/* 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-color: #7D7469;
/* 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-color: #7D7469;
/* 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-color: #7D7469;
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;
filter:alpha(opacity:0.1);
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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;

Gramps:
I am confused. What does your example have to to with Spry menu bar widgets, absolute positioning, and the reason my code will not drop down or right
the submenus in "Internet Exploder" ? Your code suggestions have no apparent relevance to the problem.
After a hundred iterations, I am close with my code above: it works flawlessly in all the other browsers and correctly positions the main menus in IE 7. It's only problem is that submenus do not pop up or down on hover over the main menu item. If I alter the main menu containers to relative position, the code breaks down in all browsers. Relative position seems a meaningless approach to correcting where ul.menubarvertical.ul or ul.menubarhorizontal appear. Javascript moves them into position from off screen on hover, not CSS positioning commands.
The problem seems to be not in CSS, style or absolute positioning - especially since the Spry widgets work fine in every other browser than the almighty IE - rather, it seems like the problem is the lack of compatibility in IE with Javascript, the mysterious engine of Spry assets that few of us seem to understand. We rely on the experts of costly software to guide us through the Javascript gauntlet so we do not have to learn it ourselves. The fact the menu will not load up on hover would seems to be a command incompatibility in Javascript with IE 7 (the submenus are initially off the screen to left), since everything in HTML appears appropriately in absolute position for all browsers. My amateurish guess is that Javascript alone moves the submenu from offscreen to on screen, not CSS style code. Does that seem a reasonable assumption?
Gramps, I appreciate your help, but wonder why the programmers of Spry at Adobe cannot come clean with a solution to a problem they created in a program they charge a considerable sum to license. This is not rocket science - as some of us who have been programming for decades would realize - rather, its voodoo: a silly idiosyncrasy of a low level language that neither Microsoft or Adobe care to address for idiots like me, who bought their software. I have even offered paid, expert web site development consultants to fix the problem, and they don't know their ***** from second base.
Is there no one out there to figure this glitch out in simple terms? This is not the Mission to Mars. Works in several browsers, but not in another: Why? There is a clue out there in the collective brain trust: they are just not sharing it with us mere mortals.
Gramps, thanks again for your help. You are a good person.

Horizontal submenus not dropping down correctly in IE7

Hello, I am hoping somebody can help.
I have a vertical and a horizontal menu bar in my page - the vertical seems to be ok; but the horizontal menubar has submenus and they do not drop down correctly from the menu bar in IE7. They work fine in Firefox.
In my site for net newbies, this submenu is supposed to drop down from the main menu, not appear from the top of the browser.. any ideas?
Thanks for any help
The CSS looks like this:
@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.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    background-image: url(C
:\Documents and Settings\Gregory\My Documents\BUILDINGAWEBLIFE_COM\img);
/* 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: 14px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 225px;
    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: 225px;
    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: 225px;
/* 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: #CCCCCC;
    padding: 0.5em 0.75em;
    color: #0000DF;
    text-decoration: none;
    background-image: url(../img/orange.jpg);
    background-position: center center;
/* 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: #33C;
    color: #FFFFFF;
/* 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: #33C;
    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(../img/orange.jpg);
    background-repeat: no-repeat;
    background-position: center center;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
/* 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;

Update to 1.6.1 if that doesn't help, provide us with a online url.

Horizontal submenus going horizontal, not vertical

Hi, and thanks in advance. I have a Spry horizontal menu with submenus. In Live View within Dreamweaver, the submenus drop down vertically. But when I press F12 to view in IE, the submenus display horizontally. Do I have a setting totally wrong? Thanks. Kay

Hi again, everyone -- Zabeth, as you were writing your response, I was reading the "Ten Commandments" article that Ben referenced and realized I broke just about every commandment. (Got a lot of CS4 repenting to do!) I was also then re-doing the menus with pretty much everything you said. If you check the site again, you'll see that the menus are working properly, although I may have to talk to my client again about the fact that 8 menus are a bit much for a horizontal menu bar.
Thanks again to everyone for the help. I'd still be tearing my hair out. I sure appreciate everyone taking their time to help.
Kay

Create Horizontal Submenus

What is the recommended best practice for changing the spry
default CSS vertical submenu to a horizontal one? Looking for a
horizontal main menu and a horizontal submenu.

Hi,
Please refer to the following link http://forums.adobe.com/message/6208552#6208552
Regards,
Aish

Can someone recommend a horizontal nav with horizontal submenus?

Any suggestions welcome,
Thanks

Have a look at Project Seven's Menus: http://projectseven.com
Nancy O.
Alt-Web Design & Publishing
http://alt-web.com

Spry horizontal submenu does not hide in IE

My spry horizontal submenus stay displayed in IE. What should
I do.
I am using vista with DW cs3.
James

Without seeing what has been changed it is hard to say. One
suggestion I can make without seeing the code is to make sure your
Spry is up-to-date. To find out your current Spry version, look at
the SpryMenuBarHorizontal.css file in the SpryAssets folder. At the
top it will say "SpryMenuBarHorizontal.css - version 0.# - Spry
Pre-Release 1.#.#"
If you are not running version 0.6; Pre-release 1.6.1 then
you are not using the latest version. If this is the case head to
the site below which is the official Spry website. There you will
find a link to the official Spry forums as well as the Spry updater
package. Inside this package is a bunch of samples, demos and an
Extension. Install the extension and then re-start DW. Once
restarted, under the Sites menu you will see a new option to Update
Spry. Click on this and your Spry will be updated to the latest
version.
If you are still having issues after doing this you will need
to post either a link to your page or the code from your page so we
can see what you have modified to the Spry script.

Spry Horizontal Menu Bar Shift Error in IE

My horizontal submenus keep shifting to the right in Internet
Explorer. See here:
home test .
I've downloaded and replaced the js with this "fix" (
http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js)
but it's still not working. Thanks for any help!

Did you ever get this fixed. I have the same error. See
www.adshapiro.com/tset. In ie the submenu is way off the page to
the right.
If you fixed this please let me know.
Thanks.
TJ

Spry Menu Bar and IE 7.0

The spry menu bar use in
http://www.riversway.org/index_new.html
is not displaying the correct orientation. Any ideas why it is
doing that.
Also, I'm trying to understand the comments in the CSS file
that the menu bar uses. Can anyone tell me where I can edit the
width and height of the menu items individually and the width and
height of the submenu items individually. If there is a better way
than adding a style tag before each item that I need to style
differently than its class designation, I'm all ears.
Thanks,
cloud9industries

Hi
I visited your web and the menubar looks ok in both IE7 and
FF2. The menubar is horizontally and the submenus drop down
(vertically). I can't understand your problem.
To change the width items I set an id to the menu item that I
want to be bigger, and then I assign the specific width to it on
css.
If you want to see an example, click
here.
It's only a test, but I think the menubar works. The css is
commented (you will see that submenus on item 2 and item 3 have
their own width). I don't know if this is what you are looking for.
To change the height you can change paddings.
About vertically/horizontally submenus, I saw that assigning
width:auto to ul.MenuBarHorizontal ul cause that IE7 visualizes the
submenu horitzontally instead of vertically in some scenarios. I
think that assigning an specific width fixes that or don't assign
any -in the above URL you can see how I have done.
Good luck

Spry Horizontal Menu Submenus Won't Appear - Help

OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@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: auto;      padding: 0;      list-style-type: none;      font-family: "Times New Roman", Times, serif;      font-size: medium;      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: center;      cursor: pointer;      width: 108px;      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 0 0 50%;      padding: 0;      list-style-type: none;      font-size: 80%;      z-index: 1020;      cursor: default;      width: 108px;      float: none;      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: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      margin: -5% 0 0 95%;      z-index:1030; } /* 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: none;      top: 0;      z-index:1040; } /******************************************************************************* 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: 5px 5px;      color: #FEFEFE;      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: #323232;      color: #FEFEFE; } /* 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: #323232;      color: #FEFEFE; } /******************************************************************************* 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;      } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body {      font-family: Verdana, Geneva, sans-serif;      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */      padding: 0;      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */      }       .twoColFixLtHdr #container {      width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */      margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */      border: 2px solid #000;      text-align: left; /* this overrides the text-align: center on the body element. */      }       .twoColFixLtHdr #header {            padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */      border: 0px solid #000;             } .twoColFixLtHdr #header h1 {      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */      padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */       } .twoColFixLtHdr #sidebar1 {      float: left; /* since this element is floated, a width must be given */      width: 200px;      font-size:12px;      color:#FEFEFE;      background: #000;      border-top-width: 1px;      border-right-width: 2px;      border-bottom-width: 2px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #000;      border-right-color: #660000;      border-bottom-color: #000;      border-left-color: #000;      padding-top: 1px;      padding-right: 0px;      padding-bottom: 1px;      padding-left: 1px; } .twoColFixLtHdr #mainContent {      margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */      background:#660000;      } .twoColFixLtHdr #videomainContent {      margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      background: #323232;      padding-left:100px      } .twoColFixLtHdr #singleframe {      background: #323232;      }       .twoColFixLtHdr #footer {      padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */      font-size:12px;      color:#FEFEFE;      background:#000;      border: 1px solid #000;            } .twoColFixLtHdr #footer p {      margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */      padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */      clear:both;     height:0;     font-size: 1px;     line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover {      text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{     color:#4C0000;} .w1{font-size:14px;     color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{      float: left; /* since this element is floated, a width must be given */      width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */      padding: 0px 0px 0px 0px; }       .b{font-size:12px; color:#000000; } .topbtmmargin {      margin-top: 20px;      margin-bottom: 20px; } .SidebarPadding {      padding-top: 0px;      padding-right: 10px;      padding-bottom: 0px;      padding-left: 10px; } .FrontImage {      border: 5px ridge #323232;      float: left;      margin-right: 10px;      margin-bottom: 10px;      margin-top: 0px; } .FrontImageFltRgt {      border: 5px ridge #323232;     float: right;      margin-left: 10px;      margin-bottom: 10px;      margin-top: 20px; } .mapRgt {      float: right;      padding-left: 5px;      padding-bottom: 10px;      border: none;       } .sigRgt {      float: right;      padding-left: 5px;      margin-right: 60px;      padding-bottom: 10px;      margin-top: 10px;       } .textfntrgtcol {      padding-left: 200px;      font-size:12px;      color:#000000; } .textfntlftcol {      padding-right: 210px;      font-size:12px;      color:#000000; } .twoColFixLtHdr #container #mainContent ul li {      list-style-type: none;      list-style-position: outside;      list-style-image: url(images/blackbullet.gif); } .leftpicture {      border: 5px ridge #323232;      position: absolute;      z-index: 20;      height: 140px;      width: 180px;      margin-top: 10px;      margin-right: 10px;      margin-bottom: 10px;      margin-left: 210px;      left: 150px;      top: 326px; } img {      border-style: none; } .grooveimg {      border: groove; } #apDiv1 {      position:absolute;      width:200px;      height:115px;      z-index:1;      left: 0px;      top: 0px;      visibility: visible; } #apDiv2 {      position:absolute;      width:155px;      height:123px;      z-index:2;      left: 5px;      top: 4px;      visibility: visible; } #apDiv3 {      position:absolute;      width:335px;      height:122px;      z-index:3;      left: 173px;      top: 3px;      visibility: visible;      color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 {      position:absolute;      width:120px;      height:45px;      z-index:4;      left: 390px;      top: 105px;      visibility: visible; } #apDiv5 {      position:relative;      width:200px;      height:115px;      z-index:5; } .menubarWrapper {      background-color: #000;      float: left;      width: 100%; }

Move the constructor for the menu bar up to read as follows
<script type="text/javascript">

</script>
Gramps

Horizontal Spry submenus error in IE6

I have searched every horizontal menu post on this forum for
this answer. I have also edited every line in the CSS to see if it
was causing this problem. I don't know enough CSS to think up my
own CSS but have attempted some new things. My site is live and
getting about 300 visitors a day. About 60% of them are still using
IE6 so they are seeing my embarrassing disaster. I desperately need
help.
I designed and debugged my spry menu for Firefox and IE7.
But they are not working on IE6. My horizontal menu at
www.pocatellocvb.com pushes
the page content down. I need to fix it ASAP.
Here is my CSS:
/* 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: 760px;
white-space: nowrap;
/* 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;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
width: auto;
white-space: nowrap;
padding-top: 0;
padding-right: 2;
padding-bottom: 0;
padding-left: 2;
/* Submenus should appear below their parent (top: 0) with a
higher z-index, but they are initially off the left side of the
screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to auto so it comes onto the
screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
background: #FFF;
border: 1px solid #000000;
width: 210px;
/* 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;
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
color: #C40000;
/* 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
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-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-repeat: no-repeat;
background-position: 95% 50%;
Thanks so much! Ann

Hi,
Sorry because I can't understand very well English and
perhaps I will answer something that ... you know...
But I tried your code, all like you have on your web, but
adding the "BROWSER HACKS: the hacks below should not be changed
unless you are an expert", and it works on IE6, IE7, FF2. Yes,
without that, on IE6, the page breaks.
You only need to add the last fragment that I understand you
have deleted. It works without any other modification on css. You
can update your version 1.4 to 1.6 too.
I hope that I have understood all well.

Spry Horizontal Menubar Submenus offset in Explorer

I am redesigning my website and am having trouble with the spry horizontal menu bar submenus which are offsetting to the right in Explorer. They should be vertically aligned. They work correctly in Safari, Firefox, and Chrome. Also having troubles with it on the Home page where it does not want to drop down over my table-rollover content. Any suggestions on how to fix these glitches? My beta website.

I changed the document and re-uploaded it to the server. But the version on the server is still showing no change! When I close and re-open my original local document, it does show the changes made. Somehow, the changes are not properly uploading to the server or it is not allowing them to post.
Jeff
Here is the code in the document that was posted (maybe you could cast an eye on that in the mean time):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Lawson Design</title><meta name="Jeff Lawson, glendale, california, websites, brand identity, brand image, corporate identity, logos, branding, trademarks, style guides, posters, graphic design, graphic designers, brochures, marketing collateral, sales brochures, annual reports, company brochures, direct mail promotions, packaging, signage, graphic standards, marketing, commercial artists, Jeffrey Dale Lawson, consultant, fine artists, giclee editions, fine art, " content="" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">
body {
          background-image: url(images/tile8.gif);
#headerbox {
          height: 130px;
          width: 840px;
          position: absolute;
          left: 70px;
          top: 68px;
          /* [disabled]float: right; */
          /* [disabled]clear: left; */
          background-image: url(images/lawsondesign.png);
          visibility: visible;
          /* [disabled]font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; */
          /* [disabled]font-size: 15px; */
          /* [disabled]color: #444; */
          /* [disabled]padding-top: 35px; */
          /* [disabled]padding-left: 300px; */
          /* [disabled]padding-right: 250px; */
          /* [disabled]padding-bottom: 20px; */
          background-repeat: no-repeat;
</style>
<link href="../Templates/lawsondesign.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url("SpryAssets/SpryMenuBarHorizontal.css");
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onLoad="MM_preloadImages('cell1_ro.jpg','cell2_ro.jpg','cell3_ro.jpg','cell4_ro..jpg','ce ll5_ro.jpg','cell9_ro.jpg','cell6_ro.jpg','cell7_ro.jpg','cell8_ro.jpg','cell10_ro.jpg','c ell11_ro.jpg','cell12_ro.jpg')">
<div class="sectionheading" id="headerbox"></div>
<div id="text_larger">
<table height="419" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" bgcolor="#FFFFFF" id="cell1"><a href="packaging.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell1','','index/cell1_ro.jpg',1)"><img src="index/cell1.jpg" name="index/cell1" width="174" height="140" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell2"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell2','','index/cell2_ro.jpg',1)"><img src="index/cell2.jpg" name="index/cell2" width="174" height="140" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell3"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell3','','index/cell3_ro.jpg',1)"><img src="index/cell3.jpg" name="index/cell3" width="174" height="140" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell4"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell4','','index/cell4_ro.jpg',1)"><img src="index/cell4.jpg" name="index/cell4" width="174" height="140" border="0" /></a></td>
    </tr>
    <tr>
      <td align="center" bgcolor="#FFFFFF" id="cell5"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell5','','index/cell5_ro.jpg',1)"><img src="index/cell5.jpg" name="index/cell5" width="174" height="141" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell6"><a href="packaging.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell6','','index/cell6_ro.jpg',1)"><img src="index/cell6.jpg" name="index/cell6" width="174" height="141" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell7"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell7','','index/cell7_ro.jpg',1)"><img src="index/cell7.jpg" name="index/cell7" width="174" height="141" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell8"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell8','','index/cell8_ro.jpg',1)"><img src="index/cell8.jpg" name="index/cell8" width="174" height="141" border="0" /></a></td>
    </tr>
    <tr>
      <td align="center" bgcolor="#FFFFFF" id="cell9"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell9','','index/cell9_ro.jpg',1)"><img src="index/cell9.jpg" name="index/cell9" width="174" height="137" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell10"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell10','','index/cell10_ro.jpg',1)"><img src="index/cell10.jpg" name="index/cell10" width="174" height="137" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell11"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell11','','index/cell11_ro.jpg',1)"><img src="index/cell11.jpg" name="index/cell11" width="174" height="137" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell12"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell12','','index/cell12_ro.jpg',1)"><img src="index/cell12.jpg" name="index/cell12" width="174" height="137" border="0" /></a></td>
    </tr>
</table>
</div>
<div class="footerbar" id="footerbar"></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="home"><a href="index.html" title="Welcome to Lawson Design">Home</a></li>
<li id="aboutus"><a href="about.html" title="About Us" class="MenuBarItemSubmenu">About Us</a>
    <ul>
      <li><a href="clients.html">Clients</a></li>
      <li><a href="jefflawson.html" title="About Jeff Lawson">Jeff Lawson</a></li>
      <li><a href="philosophy.html" title="Our Philosophy">Our Philosophy</a></li>
    </ul>
</li>
<li id="services"><a href="services.html" title="Services" class="MenuBarItemSubmenu">Services</a>
    <ul>
      <li><a href="identity.html" title="Brand Identity">Brand Identity</a></li>
      <li><a href="communications.html" title="Communications">Communications</a></li>
      <li><a href="websites.html" title="Websites">Websites</a></li>
      <li><a href="packaging.html" title="Packaging">Packaging</a></li>
      <li><a href="exhibits.html" title="Exhibit Graphics">Exhibit Graphics</a></li>
    </ul>
</li>
<li id="consulting"><a href="consulting.html" title="Consulting" class="MenuBarItemSubmenu">Consulting</a>
    <ul>
      <li><a href="audits.html" title="Brand Audits">Brand Audits</a></li>
      <li><a href="marketing.html" title="Marketing Planning">Marketing Planning</a></li>
    </ul>
</li>
<li id="arteditions"><a href="http://artid.com/members/lawsondesign" title="Giclee Editions" target="_new">Art Editions</a></li>
<li id="contactus"><a href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>
<script type="text/javascript">
var identityslideshow = new Spry.Widget.ImageSlideShow("#identityslideshow", {
          widgetID: "identityslideshow",
          injectionType: "replace",
          autoPlay: true,
          displayInterval: 4000,
          transitionDuration: 2000,
          componentOrder: ["view"],
          plugIns: [ ]
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Horizontal menu bar - dynamic xml submenus - how?

hi everyone!
i have an xml file which i want to turn into a spry horizontal menu bar:
<?xml version="1.0" encoding="UTF-8"?>
<menu>
<menuitem heading="Kennel" url="">
     <submenu heading="Dogs" url="includes/html/dogs.html" />
     <submenu heading="*******" url="includes/html/*******.html" />
     <submenu heading="Puppies" url="includes/html/puppies.html" />
     <submenu heading="Champions" url="includes/html/champions.html" />
     <submenu heading="Hot Prospect" url="includes/html/hotprospects.html" />
     <submenu heading="Family" url="includes/html/family.html" />
     <submenu heading="Exports" url="includes/html/exports.html" />
</menuitem>
<menuitem heading="News" url="news/news.html">
    <submenu heading="News" url="news/news.html" />
    <submenu heading="Breeding Plans" url="includes/html/breeding.html" />
    <submenu heading="Available" url="includes/html/available.html" />
</menuitem>
<menuitem heading="Other" url="">
    <submenu heading="Gallery" url="includes/html/gallery.html" />
    <submenu heading="Tribute" url="includes/html/tribute.html" />
    <submenu heading="Links" url="includes/html/links.html" />
</menuitem>
<menuitem heading="Contact" url="includes/html/contact.html" />
</menu>
i managed to make each menuitem display but ther submenus can't/wont populate! you cant have nested spry regions, so how is it done???
any help would be appreciated!
thanks!
a very confused delboy :-s

actually you can have nested spry xmldataset so long as your spry is up to date ;-)

Submenus not appearing using spry horizontal menubar

I am working on a MAC running MAC OS 10.5.6 and working in Dreamweaver CS4. I have inserted a spry horizontal menubar with two levels of submenus. None of these submenus is showing up when I try and test the menubar.
Thank you, Mary Pat

I am working on a MAC running MAC OS 10.5.6 and working in Dreamweaver CS4. I have inserted a spry horizontal menubar with two levels of submenus. None of these submenus is showing up when I try and test the menubar.
Thank you, Mary Pat

Horizontal Submenus?

Similar Messages

Maybe you are looking for