Sub Menus/Sub Pages in iWeb09?

Hi all, VERY new to this iWeb thing, but there is one question I need to ask:
Can you do sub-pages after navigating to a main navigation page?
For example:
If I have a website for a company that has a page for each member of the business that you navigate to from the main navigation menu bar, is there then a way to have sub pages from each of these main people's pages to go to FROM WITHIN their page?
Hope I make this clear enough to understand!
Cheers,
David

For the main navigation, you can either use the iWeb default one, or build your own which gives you an opportunity to customize the look.
http://www.iwebformusicians.com/WebMusic/Navigation.html
If you choose to keep the default navigation, go to the Page inspector and uncheck the box "Include page in navigation menu" for each page you that you don't want to appear in it. In other words, the extra pages for each sub section.
Build a sub navigation in a text box for each section and create the hyperlinks to the pages of this section.
If you want to build your own main navigation, uncheck "Display navigation" for each page of your site.
The site I referred you to above is build on ten different domain files for ease of handling and updating. The main menu consists of external hyperlinks to each section and the sub menu uses internal links.
For an example of a site that is built on one domain file and has a custom main and sub navigation go to .......
http://roddymckay.com/PlanetRoddyPhotoSatellite/iWebPhotoSatellite.html
Here, both the main and sub navigation use "Link to: One of my pages" in the Link inspector.

Similar Messages

Sub-menus to Top Level Pages issue

My web site has eight top level pages, and sub-menus to those pages. Using the menus widget I set up the menus on my master page and it works fine. But I decided that on one (and only one) of the top level pages i do NOT want the drop down menu to show. When I check "Top Level Pages" (and uncheck Edit Together) on that particular menu page, Muse still applies Top Level Pages to the other seven pages — no sub-menus appear under any pages. It's an either/or situation — either sub-menus appear under every top level page or none appear. Can anyone tell me what I'm doing wrong? Or is it not possible to selectively have sub-menus appear under select Top Level Pages?

In your plan view right mouse click on the pages that you do not want in the menu and choose exclude from menu.

Spry Menu Bar 1.7 Rendering Variable background height based presence/absense of sub-menus

First, let me thank those who have offered help on previous posts on this issue -- the suggestions have pointed me in new directions.
However I am still having problems with the first menu item on the top level of a horizontal menu bar which (because it has no sub-menu) renders the background differently from the other main level items. I have implemented suggestions, as you will see, by setting a class for menu items with sub-menus as per the suggestion, and then proceeding working with line height to make specific changes within that class. However any changes appeared universally through the menu bar at all levels.
Working from that suggestion, I tried establishing a class of "menubarhorizontal_no-sub-menu" and then adjusted the line height for that item. Unfortunately it applied this change again to all items leaving a displeasing white gap between menu items in the drop down menus.
I wanted to put out a call once more. I realize that the problem is in determining which of the rules to style, but I seem to have exhausted the possibilities. The latest version can be seen at www.aclco.org/testing/index.html which will provide a visual of the problem. You can see it doesn't look much different than the original which is http://www.aclco.org/index.html.
I am also including the code for the nav bar which is inserted as a library item into all the pages:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarHorizontal_no-sub-menu" href="../index.html" title="Home">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="../about_aclco.html" title="ACLCO-ACJCO">ACLCO-ACJCO</a>
<ul>
    <li><a href="../about_aclco.html#mission_mandate" title="Mission and Mandate">Mission and Mandate</a></li>
    <li><a href="../about_aclco.html#governance" title="Governance">Governance</a>
      <ul>
        <li><a href="../about_aclco.html#executive">Executive</a></li>
      </ul>
    </li>
    <li><a href="../by-laws_policies.html" title="By-Laws and Policies">By-Laws and Policies</a></li>
    <li><a href="../about_aclco.html#staff_volunteers" title="Staff and Volunteers">Staff and Volunteers</a></li>
    <li><a href="../public_documents.html" title="Public Documents">Public Documents</a></li>
</ul>
</li>
        <li><a class="MenuBarItemSubmenu" href="../about_Clinics_overview.html" title="About Community Legal Clinics">Community Legal Clinics</a>
          <ul>
<li><a href="../about_Clinics_overview.html" title="About Clinics - Overview">Overview</a></li>
<li><a href="../critical_characteristics.html" title="Critical Characteristics">Critical Characteristics </a></li>
<li><a href="../what_clinic_do.html" title="What Clinics Do">What Clinics Do</a>
<ul>
    <li><a href="../Advice+referrals.html" title="Advice and Referrals">Advice and Referrals</a></li>
<li><a href="../case_work+legal_representation.html" title="Case Work and Legal Representation">Case Work and Legal Representation</a></li>
<li><a href="../community_development.html" title="Community Development">Community Development</a></li>
<li><a href="../public_legal_education.html" title="Public Legal Education">Public Legal Education</a></li>
<li><a href="../law_reform.html" title="Law Reform">Law Reform</a></li>
</ul>
</li>
<li><a href="../who_clinics_serve.html" title="Who Clinics Serve">Who Clinics Serve</a></li>
<li><a href="../impacts.html" title="Impact on Clients and their Communities">Impact</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="../Members_Only/intranet_portal_page.html" title="Members Only">Members Only</a>
          <ul>
            <li><a href="../Members_Only/intranet_portal_page.html" title="ACLCO Intranet Pages">ACLCO Intranet Pages</a></li>
            <li><a href="http://www.bulletinboards.com/message.cfm?comcode=ACLCO " title="ACLCO Discussion Forum">ACLCO Discussion Forum</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="../contact_us.html" title="Contact Us">Contact</a>
          <ul>
<li><a href="../contact_us.html" title="Contact Information">Contact Information</a></li>
<li><a href="../links.html" title="Links">Links</a></li>
          </ul>
        </li>
      </ul>
The spry framework coding For the Horizontal Menu Bar is as follows:
@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;
    line-height: 23px;
    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;
    line-height: 21px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto; /* This allows the width of the various top level menu items to adjust automatically to fit the contents of each menu item */
    float: left;
ul.MenuBarHorizontal_no-sub-menu li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto; /* This allows the width of the various top level menu items to adjust automatically to fit the contents of each menu item */
    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: 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: 200px; /* This establishes a fixed width for the drop down menus */
/* 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: none; /* removes the grey border from around the sub-menu container */
/* Menu items are a light gray block with padding and no text decoration NB: Remove - background-color: #EEE; reset color from #333 to #FFF*, and establish a background image with repeat, Especially note that this only sets the top level items, i.e. those with no children sub-menus attached to them.*/
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
    background-repeat: repeat-x;
    background-color: #000088; /*background color must exactly match the color of the bottom edge of the repeating background png so that if it runs over 39px in height their won't be any gaps of white. */
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text; again reset thebackground-color: #3CC to equal the color of the bottom edge of the repeating png (see above). Set background image and repeat for a hover state. However, this only sets hover states for top level menu items and sub-menus that have higher level items above them. If for example a menu has 3 levels it will not set for the 1st and 2nd level. */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
    background-repeat:repeat-x;
    background-color: #2E35A3;
    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-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
    background-repeat:repeat-x;
    background-color: #2E35A3;
    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%) Remove the background image that displays arrows and set the appropriate background image and repeat. */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segment-Dark.png);
    background-repeat:repeat-x;
    background-color: #000088;
    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(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
    background-repeat: repeat-x;
    background-color: #000088;
    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%) This controls sub-sub-menu items in hover state. */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
    background-repeat:repeat-x;
    background-color: #2E35A3;
    color: #FFF;
/* 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 Controls fly-out menu items in hover or focus state.(50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
    background-repeat:repeat-x;
    background-color: #2E35A3;
    color: #FFF;
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;
Finally, there is minimal css coding to help position the menu bar within the web page relative to the top of the page, and left edge of the web page.
This is done with a div tag called Main Nav Contents.
#Main_nav_contents {
    padding: 0;
    margin-top: 0px;
    height: auto;
    width: 950px;
    padding-top: 275px;
    padding-left: 35px;
I would very much appreciate any further help that people can provide me. It seems that the trick is to identify the appropriate rule; however that has thus far alluded me.
Thanks,
Steve Webster

This will help http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one

How do you make a transparent spry menu that has a background color on sub menus?

Hi i am a total newbie at html and css scripting/coding and i've been working on creating a website of course because im here and i have search and search and i've found a few topics about this but none of them have what i want and it would be helpful if when you post the reply you explain it so hopefully i can add on and learn but i am trying to get the background color on the sub menus #1A1A1A and then the menu it self transparent here is my code it might make no sense at all since im a newbie ;P
@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 auto;
          padding: 0;
          list-style-type: none;
          font-size: small;
          cursor: default;
          width: 100em;
/* 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: 18px;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 10.8em;
          float: left;
          visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 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: 15em;
/* 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
ul.MenuBarHorizontal ul
          border: 0px solid #1A1A1A;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: transparent;
          padding: 9px;
          color: #FFF;
          text-decoration: #1A1A1A;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          font-weight: bold;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 18px;
/* 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: #0048ff;
          color: #EEE;
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-color:#1A1A1A;
          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-color:#1A1A1A
          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: 85% 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: #222222;

Hi and welcome -
Start with fixing this missing semicolon (in red)
/* 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:#1A1A1A;
          background-repeat: no-repeat;
          background-position: 95% 50%;
You will find you will get faster, more accurate help from us if you upload your test page and any dependent files to your server and post a link here. That way we can examine ALL your code

Sharing A Solution - CREATING A SET OF SUB MENUS ON MAIN MENU IN iDVD

A recent question I posted got some attention from a number of people about how to create a set of sub menus on the main menu of an iDVD project. Evidently there are a number of us who tried to find a way to do this. I attended an Apple Store iDVD workshop and was fortunate enough to be the only one in attendance. So I had the Mac Genius’s attention for a full hour and he was very helpful. Here’s how to do this in detail. Good luck!
- Fred
CREATING A SET OF SUB MENUS ON MAIN MENU IN iDVD
NOTE: when you import the iMovie file don’t add to the drop zones or add music to the sub menus until you finish this work!
Go to the map view. Once in map view choose to show the map view as a flow chart moving from left to right – it’s the left selection of the two which appear on the left-hand side of the sizing slider tool that determines how big the map view icons will appear. You will want to set that slider to the minimum size to make it easier to navigate. Select the main menu icon.
Open the main menu to edit it and select “Scene Selection” and then copy and paste it as many times as you have sub menus. Each sub menu can only hold 6 scenes so if you have 18 scenes you will have 3 sub menus which means you will copy the first one and then past it twice which will give you 3 sets of “Scene Selection” options on the main page.
After you create the set of “Scene Selections” return to map view. You will now have a copy of each group of sub menus under each sub menu. The entire film will be recreated for each set of “Scene Selections” that you have and you need to edit them out so that you have only one for each sub menu.
You CANNOT simply delete the groups in front of the one you want to keep. For instance, suppose you have 3 sub menu groups and you are at the first sub menu selection. You cannot simply delete the first two groups in front of the third one – it will delete all of the sub menus after the one you want.
(REPEAT FROM HERE) Go to the last group of sub menus and select the scenes for the first group of sub menus. In other words go down to the last grouping of sub menus, locate the first sub menu group and choose each scene within the group and delete each one. This will leave you with an empty sub menu. Do this for the next group and any subsequent group up to the last one. Do not delete the last group! This is the group you want at this level.
Once you have deleted the scenes you can cut and paste the last group of scenes to the first sub menu selection in the group. Once done you can delete the other sub menus groups that come after the first one.
Once you have the group of scenes moved to the first sub menu selection you need to change the name of the group of scenes. For instance if you are working on group 13-18 you need to change the group name from 1-6 which is what it is currently named.
Repeat these steps for each successive group moving up from the last one to the top with one change – you will choose to delete the last group from each successive sub menu since you have already saved it in the last group you worked on which is below the one upon which you are now working.
Once you are at the top group you will then simply be able to delete the other sub menus that appear beyond the first one.

Nicola,
The Fact: It's all in the markup and the CSS.
The Problem: We are not privy to your markup and CSS and as such cannot help you.
The Solution: Supply a link to your site, or at the very least, copy and paste your code here
Gramps

Cannot click on sub-menus and notification prompts in Mircosoft Exchange when using Firefox.

When I access Microsoft Exchange web app from Firefox I've can no longer click on pop-up sub-menus and notifications that I could previous use.
For example, when I go to empty my deleted items folder and select empty folder, I get this notification (menu 1) that I now cannot click on. All I can do is just hit 'enter' to close the menus without actually making a yes/no input.
Similarly, when i go to move folders and get this pop-up menu (menu 2), I cannot make any selection, and the 'enter' to close method does not work. All I can do then is close the page.
I have tried disabling firefox's pop-up blocker but that did not rectify the issue. I can still use the sub-menus in other web browsers so this is a firefox specific problem.
Any help in identifying the cause and remedying this would be greatly appreciated.

Many site issues can be caused by corrupt cookies or cache.
* Clear the Cache and
* Remove Cookies<br> '''''Warning ! ! '' This will log you out of sites you're logged in to.'''
Type '''about:preferences'''<Enter> in the address bar.
* '''Cookies;''' Select '''Privacy.''' Under '''History,''' select Firefox will '''Use Custom Settings.''' Press the button on the right side called '''Show Cookies.''' Use the search bar to look for the site. Note; There may be more than one entry. Remove '''All''' of them.
* '''Cache;''' Select '''Advanced > Network.''' Across from '''Cached Web Content,''' Press '''Clear Now.'''
If there is still a problem,
'''[https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode Start Firefox in Safe Mode]''' {web link}
While you are in safe mode;
Type '''about:preferences#advanced'''<Enter> in the address bar.
Under '''Advanced,''' Select '''General.'''
Look for and turn off '''Use Hardware Acceleration'''.
Poke around safe web sites. Are there any problems?
Then restart.
If there is still a problem;
Start '''[https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode Firefox in Safe Mode]''' {web Link} by holding down the '''<Shift><br> ''(Mac Options)'' ''' key, and then starting Firefox. Is the problem still there?

Horizontal menu looks fine but sub menus drop down one and move to the right over the top of one another

Help, My horizontal menus look great but when I add sub menus to them they drop down one place and move to the right side where they be over lapping each other. What can I do? I'm working with adobe muse.

It might be faster to start over. File > New > HTML page. Insert Spry Menu.
Customize Spry Menus by David Powers
http://foundationphp.com/tutorials/sprymenu/customize1.php
When making code changes, use /**CSS Comments**/ to remind yourself what you did in case things go wrong. ;-)
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry bar sub menus not working. Am at wit's end.

Hi all,
I am having trouble with getting my submenus on my spry bar to function. At first I was getting the error message of spry undefined. I looked for answers in forums, and tried a few things like making sure the .js file was there, looking for code mistakes, etc. Nothing worked, so I then deleted and reinstalled the spry bar and spry assets files, and of course, uploaded them to the server. Now I don't get any error messages, but the submenus just don't drop down.
Here is my code:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Natural Handmade Soaps</title>
<link href="../../styles/HealingHandsStyleSheet.css" rel="stylesheet" type="text/css" />
<script src="../../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="container">
<div id="banner">
<img src="../../images/BitsAndPieces/HealingHandsNewBanner.jpg" width="960" height="99" />
</div>
<div id="healingmenu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="../../index.html">home</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="../hair_serum.html">hair</a></li>
    <li><a class="MenuBarItemSubmenu" href="../face_products.html">face</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="/soaps.html">complexion perfection face soap</a>
          <ul>
            <li><a href="#">Item 3.1.1</a></li>
            <li><a href="#">Item 3.1.2</a></li>
          </ul>
        </li>
        <li><a href="../complexion_perfection_pages/complexion_perfection.html">complexion perfection face serum</a></li>
        <li><a href="../silk.html">SILK face serum</a></li>
      </ul>
    </li>
    <li><a href="../body_products.html">body</a></li>
    <li><a href="../Essential_Oil_Blends/essential_oil_blends.html">eo blends</a></li>
    <li><a href="../../Pages/ayreveda/ayurveda_page.html" class="MenuBarItemSubmenu">herbal info</a>
      <ul>
        <li><a href="../../Pages/ayreveda/ayurveda_page.html">what is ayurveda?</a></li>
        <li><a href="../../Pages/bach_flower_essences/bach_page.html">what are bach flower essences?</a></li>
      </ul>
    </li>
<li><a href="mailto:[email protected]">contact</a></li>
    <li><a href="/blog">blog</a></li>
</ul>
</div>
<div id="left_column">
<p align="left"><img src="images/cp_serum_soap_teapot.jpg" width="227" height="206" alt="Complexion Perfection Soap" /></p>
<p align="left"><span class="style47"><img src="images/cpsoap.JPG" alt="" width="227" height="206" /></span></p>
<p align="left"><span class="style47"><img src="../complexion_perfection_pages/images/three_bottles.jpg" alt="" width="240" height="200" /></span></p>
<p><span class="style1"><a href="../complexion_perfection_pages/complexion_perfection.html">Complexion Perfection Face Serum</a></span><span class="style2">, for use with Complexion Perfection soap.</span></p>
<p><br />
</p>
</div>
<div id="center_column">
<p align="center" class="style1">About the Soaps</p>
<p class="style2" >Healing Hands Apothecary soaps are handmade in small batches using rich, all-natural ingredients. The soaps are scented with pure, therapeutic essential oils obtained from plants, which also carry the beneficial properties of the plants. The soaps take 4-6 weeks to "cure" and are extremely mild and gentle for your skin. They will last
    significantly longer than the popular bars you get from the store because
    they are not fluffed up with air. Each 3.5" x 1" x 2.75" bar is approximately 5-5.5 oz of pure goodness!</p>
<p align="center" class="style1" >Complexion Perfection Face Bar</p>
<p class="style2">A rich face soap made with French
    green clay to tighten pores and extract impurities from the skin. The Complexion Perfection
    face bar is specifically made to complement the <a href="http://www.healinghandsapothecary.com/Product%20Pages/complexion_perfection_pages/complexi on_perfection.html">Complexion Perfection Face Serum for Problem Skin</a>. Complexion Perfection is suitable for deep cleansing of all skin types, though it is especially great for problem skin.</p>
<p class="style2"><strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, shea butter, lavender, bergamot, and eucalyptus essential oils, French green clay, green tea.</p>
<p align="center" class="style47">
    <input type="hidden" name="cmd" value="_s-xclick" />
    <input type="hidden" name="hosted_button_id" value="GHKAAN38MDEDU" />
</p>
<div align="center">
    <table>
      <tr>
        <td><input type="hidden" name="on0" value="Quantity" />
          Quantity</td>
      </tr>
      <tr>
        <td><select name="os0">
          <option value="One Bar">One Bar $6.50 USD</option>
          <option value="Five Bars">Five Bars $30.00 USD</option>
          <option value="Ten Bars">Ten Bars $55.00 USD</option>
        </select></td>
      </tr>
    </table>
    <input type="hidden" name="currency_code" value="USD" />
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</div>
<p align="center" class="style51"><img src="images/GBB_closeup.jpg" alt="" width="300" height="200" /></p>
<p align="center" class="style1">Gardener's Blessing Bar</p>
<p align="left"><span class="style2">A special soap made for gardeners! People who like a moisturizing soap that cleans well after a hard day's work in the yard will love the Gardener's Blessing Bar. Dried orange peel and poppy seed offer exfoliation, and tea tree oil soothes cuts, bites, and scratches. Sweet orange and eucalyptus oils add a delightful scent to this ultra rich and creamy soap.</span></p>
<p align="left" class="style2"> <strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, cocoa butter, shea butter, beeswax, sweet orange oil, eucalyptus oil,    tea tree oil, dried orange peel, poppy seed.</p>
<p align="center" class="style47">Gardener's
    Blessing Bar<br />
    One Bar: $6.50<br />
    Out Of Stock</p>
<p> </p>
</div>
<div id="right_column">
<p align="center"><a href="/Product Pages/soaps/purify.html"><font size="+2" class="style1">PuriFire<br />
        <span class="style53">The bar that kills MRSA, viruses, and bacteria!
Made with rhassoul clay and rooibos tea. Click here for more ingredients.</span></font></a></p>
<p align="center"><span class="style57"><img src="images/PuriFireBasket.JPG" alt="" width="300" height="200" /></span></p>
<p class="style2">PuriFire soap was developed for healthcare
    workers who work all day in an environment
    saturated with deadly bacteria and viruses. This
      soap contains essential oils with antiviral and antibacterial properties, and will effectively cleanse your body of all unwanted microorganisms
while leaving the beneficial ones behind for defense.</a></p>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <div align="center">
      <input type="hidden" name="cmd2" value="_s-xclick" />
      <input type="hidden" name="hosted_button_id2" value="SQY6LVCYW9LU2" />
      <table>
        <tr>
          <td><input type="hidden" name="on" value="Quantity" />
            Quantity</td>
        </tr>
        <tr>
          <td><select name="os">
            <option value="One Bar">One Bar $8.00 USD</option>
            <option value="Five Bars">Five Bars $37.50 USD</option>
            <option value="Ten Bars">Ten Bars $70.00 USD</option>
          </select></td>
        </tr>
      </table>
      <input type="hidden" name="currency_code2" value="USD" />
      <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit2" alt="PayPal - The safer, easier way to pay online!" />
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
    </div>
</form>
<p align="center"><img src="images/PuriFire stacked.JPG" alt="" width="309" height="219" /></p>
<p align="center"> </p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Any ideas? Is it something to do with where my Spry Asset folder is, like maybe I shouldn't have ../../../?????
Thank you.

Hi,
Although you didn't get an answer here, I visited your web page and it looks like you found a way to solve the problem. I am having a similar problem and wonder if you (or somebody) can help me?
My problem is that while everything else works just fine, my sub-submenus do not. The first one drops down, but the second one does not (so it looks like I have one item when in fact I have two).
My css code is copied directly from Adobe's SpryMenuBarHorizontal.css. The only things I changed were some button widths, colors, and I tweaked the location the buttons appear in (but did not change original locations nor z-indexes, I don't think!). I am reprinting it below, just in case.
I am using the last version of Spry (1.6.1).
Here is a link to the page, and when you view it, keep in mind that only "Portfolio" has sub-menus, and of those, only "Writing" is supposed to have more than one sub-item ("Fiction" and "Non-Fiction").
http://www.kateswork.com/tests/test-sample4.html
Here is the css:
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
ul.MenuBar2Horizontal
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    position: relative;
/* 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. These have are a fixed width in the primary menu, an auto width in the secondary menu, which has no children. */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 7em;
    float: left;
    white-space:nowrap;
ul.MenuBar2Horizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em;
    float: left;
    white-space:nowrap;
/* Submenus containers 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: 7em;
    position: absolute;
    left: -1000em;
    white-space:nowrap;
/* Submenu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 7em;
/* Sub-submenu containers are wider to accomodate longer items */
ul.MenuBarHorizontal ul ul
    position: absolute;
    width: 11.6em;
    height:2em;
    margin-top: -2%;
    margin-right: 0%;
    margin-bottom: 0;
    margin-left: 0%;
/* Sub-submenu contents */
ul.MenuBarHorizontal ul ul li
    position: absolute;
    width: 11.7em;
/* 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;
/* Submenus should appear slightly overlapping to the right (99%) */
ul.MenuBarHorizontal ul ul
    margin: 0 0 0 99%;
/* Sub-submenus should also appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul li
    margin: 0 0 0 0%;
    height:auto;
/* 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 #999999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    text-decoration: none;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #FFFFCC;
    border-bottom-color: #7F7F5C;
    border-left-color: #7F7F5C;
    border-top-width: .1em;
    border-top-style: solid;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #333333;
    background-color: #CCCC99;
    padding-top: 0.5em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    padding-left: 1em;
ul.MenuBar2Horizontal a
    display: block;
    cursor: pointer;
    text-decoration: none;
    border-right-width: .2em;
    border-bottom-width: .2em;
    border-left-width: .2em;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-color: #999999;
    border-left-color: #999999;
    border-top-width: .2em;
    border-top-style: solid;
    border-top-color:#999999;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #333333;
    background-color: #FFFFFF;
    padding-top: 0.5em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    padding-left: 1em;
ul.MenuBarHorizontal ul li ul li a
    border-right-color: #7F7F5C;
/* MOUSEOVER CONDITIONS: */
/* On mouse-over, or "focus," buttons change to a grey background and white text.
The following rule only applies to the IE browser (notice the syntax using the colon): */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
/* The next rule set has a group selector, so top-menu and submenu items will have the same background color and font color. Notice that the font color here overrides the base rule, above. Menu items that are open with submenus are set to MenuBarItemHover with a grey background and white text. */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #333333;
    color: #FFFFFF;
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;

Creating a hero photo slider using jquery but the nav bar sub menus go behind the hero div tag

Dropbox - Butler Lawyers
Hello Everyone
I m designing a site with a hero photo slider using jquery. My problem is, the nav bar submenus are going behind the photo slider so you can't see the Legal Services tab sub menus. I have provided a dropbox link to the entire project. I m working on the file entitled index.html. Any thoughts on how to fix the problem???
Thank you in advance
Paul

Hi Paul
Sounds like a z-index problem.
We really need to see ALL your files to solve your issue quickly and accurately without a lot of guessing and questions back-and-forth.
Just rename a copy of your problem page (such as "test.html") and upload it to your server (with any associated files) in whatever folder the original page was located, and simply post a link in the Forum and tell us your problem.
This saves you having to cut and paste miles of code into the Forum for the page and all the dependent CSS, JS etc. files.and saves us from having to recreate all your files, find your images and then repair your code and test the solution for you.
I trust this is helpful.

Increased editing options of sub-menus?

I, like apparently a number of people, was hoping the latest announcements would include some upgrading to iLife but specifically iDVD. Perhaps I am looking for too much from this user friendly yet basic tool. I would like to use some of the options available on Keynote in particular being able to edit/author an iDVD sub-menu in the same way I can a slide on Keynote (ie adding/editing text boxes and graphics). Doing this is awkward at best. I have figured out a bunch of work arounds including making a number of short movie clips of my Keynote and adding them to sub-menus in iDVD but this seems like a lot of work. Excuse me if this is the wrong place to ask this question but is there another program as easy as and user friendly as iDVD yet provides more editing options for the individual "pages/submenus"?
Thanks

Go to Control Panel>Hardware and Sound>Tablet PC Settings
and set left handed.
MTSTUNER

Help with menus, sub menus and such.....

Hello
I have spent ages getting to this point and after checking everything over and over and over yet again I cannot figure out what is happening with the menus at the top of my page.
The first menu "Garrett Smith" operates fine. The sub menus appear directly under it as they should when it is moused over.
It is the second menu "Work" in which I am having a problem. When you mouseover "Work", "View by Discipline" should open directly underneath. Once "View by Discipline" is clicked the four submenus should then open, again directly underneath "Work" and "View by Discipline". Then once "Print", "Printmaking", "Illustration" or "Photography" is moused over the test menus should in turn pop up to the side of them lining up with the top of each, depending on which one is moused over.
I have checked my CSS, javascript and everything else over and over. I imagine it is something simple that I am simply overlooking as I have been searching though all of this for the better part of the day so it is all blending together.
Here is the link to the site if you need to see my attempts thus far:
http://garrettsmithprintdesign.com/
Any help would be greatly appreciated.

Hi Garrett,
   I'm not as familiar with a jquery script, but in many of the drop-downs I've created, the submenu is built as a nested sub-set of it's parent... for instance instead of this:
<li class="printbutton"><a href="#">Print</a></li>
<li class="printmakingbutton"><a href="#">Printmaking</a></li>
<li class="illustrationbutton"><a href="#">Illustration</a></li>
<li class="photographybutton"><a href="#">Photography</a></li>
                </ul>
          </li>
          </ul>
<div id="print">
<ul id="printmenu">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
You may have something that looks more like this:
<li class="printbutton"><a href="#">Print</a>
<ul>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
</ul>
</li>
<li class="printmakingbutton"><a href="#">Printmaking</a></li>
<li class="illustrationbutton"><a href="#">Illustration</a></li>
<li class="photographybutton"><a href="#">Photography</a></li>
</ul>           </li>           </ul>
This is just an example - NOT the solution, but I think this will put you more on track if you experiment a bit along these lines. Note that closing "<li> tag for the "print" link is AFTER the nested "<ul> tags of it's submenu.
Also, if this is still problematic, note that there are tons of free samples on the web (as well as many you can purchase). Also, I've found Dreamweaver's "Spry menu system" isn't a bad place to start - it does have a few bugs, but it begins with a very basic double-drop down menu that you can fairly easily customize by editing the css...
Hope that helps,
Jesse

Creating drop down sub menus

Am i missing something, i can't seem to create sub menus.Should these not automatically drop from menu button when i have a sibling page extending from that page.
Eugene

I have juist learned how do to this, so I can help.
In Design Mode, click in your menu bar and then right to it on the blue option arrow. Onder Options/Menu Type choose All Pages. Then you will get a drop down list showing your sub menus.

How do I use one song for all Theme sub-menus?

I'm using IDVD '08.I have created a theme with 3 chapter selection sub menus. Is there any way to choose a single song that plays from start to finish (and then loops normally) regardless of which submenu you happen to be in? I know how to add the same song to every submenu, but the problem is that every time you go back and forth between the submenus the song starts again at the beginning. It's very annoying. Any help would be much appreciated.

Hi
No I don't think this is possibly with iDVD.
Never seen a Professional DVD that behaves like that either - so my plain guess is that
not even DVD Studio Pro would be able to do it.
Never seen this function in Roxio Toast™ either.
All of them starts the audio file from start when changing menu - as far as I know.
Sorry
Yours Bengt W

How to add sub menus in dreamweaver CC using Jquery Tabs

How can I add sub menus to a Menu Bar in DreamWeaver CC. I know how to do it in CS6 using Spry Menu bar but it's just not as simple as that was now in CC.
Any Help is appreciated!!

jQuery tabs is a replacement for Spry tabs, not the Spry menubar.
Stella333 found a good replacement for the Spry menubar http://forums.adobe.com/thread/1247870

Transparent spry menu that has a background color on sub menus and a few other problems(Please Help)

Hi im a noob at dream weaver and i've been trying to create a menu and i have been having problems with this menu bar i don't know what to upload and i have made a topic about this before but i only got one reply and so i am trying to make my menu bar transparent and then the sub menu's colored with the color code #1A1A1A and the menu bars that have been color background are only the sub sub menu bars if you know what i mean and also my other problem is the spacing i have between each option is really uneven is there a way to make them evenly sperated apart from each other rather than just the size of a "box" that the text is in. Here is my SpryMenuBarHorizontal.css code
@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 auto;
          padding: 0;
          list-style-type: none;
          font-size: small;
          cursor: default;
          width: 100em;
/* 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: 18px;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 10.8em;
          float: left;
          visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 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: 15em;
/* 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
ul.MenuBarHorizontal ul
          border: 0px solid #1A1A1A;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: transparent;
          padding: 9px;
          color: #FFF;
          text-decoration: #1A1A1A;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          font-weight: bold;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 18px;
/* 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: #0048ff;
          color: #EEE;
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: #1A1A1A
          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-color:#1A1A1A;
          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-color:#1A1A1A
          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-color: #1A1A1A
          background-repeat: no-repeat;
          background-position: 85% 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-color: #1A1A1A;

See if this post helps :
http://forums.adobe.com/message/1997762#1997762
and this one:
http://forums.adobe.com/message/1898539#1898539
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Sub Menus/Sub Pages in iWeb09?

Similar Messages

Maybe you are looking for