Horizontal menu and horizontal submenu

I've been using Spry menus successfully for some time now, and am able to make most modifications I need.
This one has me stumped. I'm hoping the answer is in the CSS.
I have a horizontal menu across the top of my page.
The client wants the submenu to be another horizontal menu below the primary, also across the top of the page.
But I can't seem to figure out how to get the desired layout for the submenu.
Is there something simple I can do in the css to "unstack" the submenus and have all items within each submenu appear on one line?
If I can get that far, I am worried that the active area being annoying or unuseable to their audience. Maybe I can set the delay to help this.
Thanks in advance. Amy.
ITEM ONE ITEM TWO ITEM THREE
subone-a subone-b subone-c

Figured it out myself. Just changed every instance of block to inline and ta-da.
And it isn't too awkward afterall.

Similar Messages

Horizontal menu with horizontal submenu

I am trying to create a horizontal menu with a submenu that is horizontal directly underneath. So, when you hover over the items on the top menu, the list of subitems appears as a horizontal menu direclty below the the top menu. I've been able to modfy the spry tabbed panel widget to mostly do that, but there has to be a better way. It appears that the spry menu widget for the horizontal menu just has a drop down of subitems in a vertical list below the top menu item.   I've searched but can't find the answer. Could someone please help me out with suggestions? Thank you.

It would have been a lot easier to see what the problem is if you had posted a URL to your site. Now I am only guessing that you have placed an auto width on the submenu item container.
See here for more info http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml
The only problem with the above sample is that when you make the style rule for the submenu items, you need to include !important next to the float as follows
ul.MenuBarHorizontal ul li {
    display: block;
   float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
Gramps

Spry Horizontal submenu hidden behind image

This is driving me nuts. I am using Dreamweaver CS4. I have created a horizontal menu bar just above an image. When i hover over the main menu item the submenu is hidden behind the image. I have not been able to figure this one outy. i am very new to CSS and Dreamweaver. This is a template that i want to use across my entire site. You can goto http://www.gray-wolf.net/MainPages.html.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: auto;
width: 800px;
font-family: Arial, Helvetica, sans-serif;
background-color: #008080;
height: 40px;
float: left;
top: 100px
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
width: auto;
/* 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(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;
float: left;
background: #FFF;

Your unexpected (and undesired) wolf call on entering that page scared the begesus outta me. Most people don't take kindly to such surprises!
You do realize that the page you linked to is a TEMPLATE page, but it is named with an HTML extension, right? You did that just to show us the template?
Also, it appears that you have built your entire site inside of the Templates folder -
<a href="Templates/pgpage1.htm" title="Page 1 of my Photo Gallery">
That's improper. Nothing should be in the Templates folder other than the template files themselves.
Finally, your use of absolute positioning as a primary page layout method is going to get you into serious trouble. Please read this -
http://apptools.com/examples/pagelayout101.php
Now - here's the problem:
You have applied a style of 'overflow:hidden' to div#nav. Remove that. With that in place, the submenus cannot flow OUT of div#nav.

Spry Horizontal Submenu IE bug

The Spry Horizontal submenu bar does not display correctly in
Internet Explorer. Everything appears to be working correctly in
Firefox.
The Submenu on the navigation bar keep dropping down from the
top of the browser window instead from it's corresponding parent
menu bar.
I've updated my Spry files to the latest versions, from
Adobe's site. Since the submenu works correctly in Firefox, it
makes me think this is a bug correction, not something wrong with
the css.
Do you have any suggestions on how to correct this? I've seen
this question asked alot on other Dreamweaver forums.
Thank you!!!!!!!!

***SOLVED***
Hi There,
Cheers for replying. I took a look and the labs one seemed to
work correctly. From here, under the CSS Styles tab I selected the
SpryMenuBarHorizontal.css group and deleted them all. I then
cleaned out my code of the references to the menu and reinsterted
the menu (I had this problem before updating to Version 1.6.1 from
1.4).
From my own error here I would suggest justice49 deletes the
menu completely (backup first) and reinserts his/her menu. from
here, each time a change is made, preview the menu to make sure the
change doesn't break the menu. this worked for me. Also check that
your spry menu is at V1.6.1. There is a forum entry about updating
if necessary:
UPDATING
SPRY
Hope this helps.

Horizontal submenu bar?

hi .. i'm pretty new to spry and was wondering if there's a
way in order to create a horizontal with a submenu that's displayed
horizontal too? in dreamweaver i see only the possibility to change
the style of the main menu bar but not the submenu.

Hi Chris,
I tried your page in IE6 and it crashed the browser! To be honest, most people should have upgraded from IE6 ages ago, I was redirected to MS website to upgrade the second time I started the browser.
As I couldn't even get the page to load, I can't suggest what could be wrong.
One thing I did notice wrong that made your menus appear jumpy at first was that you are not preloading the images needed to display the menu bars.
you have the Javascript function in the correct place - function MM_preloadImages() {
But you have not selected to preload any images in the body tag.
Should look something like this -
<body onload="MM_preloadImages('images/buttons/contactOver.gif','images/buttons/aboutOver.gif', 'images/buttons/loginOver.gif','images/buttons/case_studiesOver.gif','images/buttons/newsO ver.gif','images/buttons/fundingOver.gif','images/buttons/eventsOver.gif','images/buttons/ homeOver.gif')">
These are obviously not the images you want to preload (taken from one of my sites), replace the images with the images used in your menu and your menu will operate much smoother as the images will be ready to use.
Hope this helps (a little!)
Chris

SPRY Horizontal Submenu Appearing in Top Left in IE

Hi -
I've read through almost every post relating to SPRY
Horizontal Submenu issues in IE - and have done a number of things
- including upgrading to 1.6. However - nothing seems to work and
I'm at wits end. Can someone please help? The page to reference is:
www.bswiftdesign.com/millennium/claimants/index.html
The drop down menu is under "Structured Settlements". I
really appreciate anyones help!

Hi bswiftdesign,
It looks like you are trying to center menu items in the
menubar and submenus. Have you seen these samples?
http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml
--== Kin ==--

Spry Horizontal Submenu Bar Problem in Internet Explorer

I follow all the directions for adding a Horizontal Spry Menu Bar and the submeanu keeps dropping in the upper left
corner of the browser in Internet Explorer. Please help to fix this problem. It looks great in all other browsers, but not
in Internet Explorer.
I have the width for the parent menu and the child menu equal at 132 px.

Thanks For Your Reply.
I finally got the spry menu to act right. How, I don't know??? Trail and error. Trail and error. I prefer to know what I am doing. So any help would be appreciated. The menu look good in Mozilla, but ust okay in Internet Explorer. My website is www.theexecutivevip.com and here is the code that now says is causing an "expanding box" problem. I have adjusted the ul, li, etc. and it is still a problem. Help please. Thanks again.
<ul id="MenuBar1" class="MenuBarVertical MenuBarActive">
          <li><a href="index.html" class="">Home</a>          </li>
          <li><a href="aboutus.html" class="">Extend Your Brand</a></li>
          <li><a class="MenuBarItemSubmenu MenuBarItemSubmenuHover" href="#">For The VIP</a>
            <ul class="MenuBarSubmenuVisible">
              <li><a href="wine.hrml" class="">The Wine Connoisseur</a>              </li>
              <li><a href="confections.html" class="">Gourmet Confections</a></li>
              <li><a href="ipad.html">Made For iPad/iPhone</a></li>
              <li><a href="laptopacc.html">Laptop Accessories</a></li>
              <li><a href="clocks.html">Clocks</a></li>
              <li><a href="timepieces.html">Fine Timepieces</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Bags & Luggage</a>
            <ul class="">
              <li><a href="checkpointbags.html" class="">Checkpoint Laptop Bags</a></li>
              <li><a href="luggage.html">Business Luggage</a></li>
              <li><a href="ladytraveler.html">The Lady Traveler</a></li>
              <li><a href="travelacc.html">Travel Accessories</a></li>
              <li><a href="golf.html">The Golf Enthusiast</a></li>
              <li><a href="organifitness.html">Organization & Fitness</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Brand Promotion</a>
            <ul class="">
              <li><a href="promotional.html">Promotional Products</a></li>
              <li><a href="writing.html">Writing Instruments</a></li>
              <li><a href="drinkware.html">Drinkware</a></li>
            </ul>
          </li>
          <li><a href="purchase.html" class="">How To Purchase</a></li>
          <li><a href="contact.html" class="">Contact Us</a></li>
        </ul>

Spry Horizontal Submenu Bar Issues in IE6

Hey there,
I've been struggling with this issue for a while now, and I was hoping that I might be able to get a little help from the community to resolve it. I've built a site which looks absolutely fine in all browsers except for Internet Explorer 6. In IE6, the sub menu bars jump around all over the place for no apparent reason, and I can't figure out why... The site in question is www.flexyoffice.co.uk.
Now, in most browsers, the submenu appears above the menu bar. This was my intention. Unfortunately, in IE6, if you hover over a menu item containing a sub menu, the submenu will either appear over the menu item, below the menu item, or next to the menu item. Additionally, once you try to actually hover over the sub menu, the sub menu itself moves, leaving the user to chase the submenu around the page in pursuit... Not ideal...! Looking at the page in IE 6, it almost seems as if the submenu opens up to the right of the menu bar, which results in everything else being thrown out. I could be wrong though.
I'm relatively new to these forums, so if there is any specific information which I can provide which would possibly help to identify the issue, please do let me know. If there are any suggestions out there that are worth giving a go, I would really appreciate any thoughts that you may have.
Thanks very much guys,
Chris

Hi Chris,
I tried your page in IE6 and it crashed the browser! To be honest, most people should have upgraded from IE6 ages ago, I was redirected to MS website to upgrade the second time I started the browser.
As I couldn't even get the page to load, I can't suggest what could be wrong.
One thing I did notice wrong that made your menus appear jumpy at first was that you are not preloading the images needed to display the menu bars.
you have the Javascript function in the correct place - function MM_preloadImages() {
But you have not selected to preload any images in the body tag.
Should look something like this -
<body onload="MM_preloadImages('images/buttons/contactOver.gif','images/buttons/aboutOver.gif', 'images/buttons/loginOver.gif','images/buttons/case_studiesOver.gif','images/buttons/newsO ver.gif','images/buttons/fundingOver.gif','images/buttons/eventsOver.gif','images/buttons/ homeOver.gif')">
These are obviously not the images you want to preload (taken from one of my sites), replace the images with the images used in your menu and your menu will operate much smoother as the images will be ready to use.
Hope this helps (a little!)
Chris

The spry horizontal submenu appear on top of screen in IE

why is it that in IE the spry submenu is opened on the top of the screen and not below the menu and how can this be fixed...i have used dreamweaver CS3 and found this to be a major issue but cannot find an answer to it?

In its original form, that is straight out of the box and
unadulterated, the SpryMenuBar is a very well behaved animal. It is
only when a budding web developer starts to mistreat it, it will rear
its ugly head.
So
the answer to YOUR major issue is kill this version of SpryMenuBar off
and start again with a new version. This time make your changes where
you can can see them and keep track of them, meanwhile testing your
markup in your favourite (IE) browser at each step.
I hope this helps.
Ben
Yes I did... but not without your help! Thank you for looking and your response! I did exactly what you said and then some.
I created a new directory with a test html and a new SpryMenuBar and SpryAssets sub-directory. Then I opened up the original version of the SpryMenuBarHorizontal.css file and began to compare it side by side with my already customized SpryMenuBarHorizontal.css by cascading the two windows vertically within DW-CS3... got that idea here I think too...
This way I could see my mistakes and eventually "fix" what went wrong.
One thing extra I had to do was add a new property ( min-height: 30px; ) to the "... a" rule that accommodated for IE7 and down as well as IE8 "Compatibility View" (which was forcing itself to run when I visited my site ???)... the change I added kept my block display from becoming too low and allowing an unwanted transparency in the list between "Items". That's the best I can describe it... ...here is the example below.ul.MenuBarHorizontal a
    display: block;
    cursor: default;
    background-color: #EEE;
    color: #006699;
    text-decoration: none;
    line-height: 30px;
    text-indent: 10px;
    font-weight: bold;
    min-height: 30px;
I don't know exactly where I went wrong but thanks to Ben's previous reply, I was able to put the puzzle back together again... no sweat !
Thank you Ben, Adobe DW and Spry !!!

Menu bar widget submenu placement bug in IE7

I am tring to set up my first horizontal menu bar widget.
Looks great in FF, but the submenu is placed over the main
menu and off to the side in IE7.
Could any one help?
Example is located here:
http://dco4.com/spry_test/
Submenu is under "consumables" button.

Possibly a padding or margins error.. having a similar issue
myself only it lines up properly in IE and not in Firefox!
Sorry..

Vertical menu with vertical submenu's

Hi,
I would like to create a vertical menu with vertical submenu's. So when you click on a menu item, it slides open and reveals the submenu items. I tried to combine different accordion widgets together and also to combine an accordion with a vertical menu, but this got all quite messy, especially when I previewed it. It seems such simple feature (Muse is using it for its own menu structures, for example the widget-library) so I find it strange that it is not available in the library or somewhere else online...
Thanks for your advice!

Hi
How exactly you have tried with accordion ?
With accordion widget this can be achieved , as label the items as main menu and sub menu items.
For example , insert an Accordion , name the label as Main and insert other elements in container area and then link them to specific pages.
You can also , try to insert an accordion with rotation so that the menu items should appear with horizontal expansion.
These video should help you :
http://www.youtube.com/watch?v=dQy_lj0ZXss
http://www.youtube.com/watch?v=_LYbjPQnw9k
Thanks,
Sanjit

Menu and sub-menu

Hi,
Is anyone knows where to find an example for creating the menu and sub-menus in coldusion?
thanks
kt

here is a simple example using cfmenu:
<cfmenu name="menu" type="horizontal"
         fontsize="14" font="Verdana, Arial, Helvetica, sans-serif" bgcolor="##ff9f40;"
        selecteditemcolor="##dd6b04" selectedfontcolor="##FFFFFF" menustyle="border: 1;">
    <cfmenuitem name="cfdiv" href="test1.cfm" display="Test1" />
    <cfmenuitem name="cfdiv2" href="test2.cfm" display="Test2"/>
    <cfmenuitem name="JavaScripts" display="JavaScripts">
        <cfmenuitem name="test3" href="test3.cfm" display="test3"/>
        <cfmenuitem name="test3a" href="test3a.html" display="test3a"/>
    </cfmenuitem>
    <cfmenuitem name="Examples" display="Examples" >
        <cfmenuitem name="cfgrid" href="cfgrid.cfm" display="CFGrid"/>
        <cfmenuitem name="cfgridwin" href="cfgridwindow.cfm" display="CFgrid in Popup Window"/>
        <cfmenuitem name="monthDay" href="ymd.cfm" display="day base on month selected"/>
    </cfmenuitem>
    <cfmenuitem name="cfmenu" href="http://tutorial16.learncf.com/demo/16" display="cfmenu on the fly"/>
</cfmenu>
hope it helps.

Header, Spry Menu and Body not properly aligned

Please take a look at my page http://www.seanmccuedesign.com/shemwebsitenew/index.html and tell me why the Header, Horizontal Spry Menu and Body are wonky and not aligned properly.
Thanks very much,
Sean

The header is a bit to the left, the spry menu hangs too far to the right, and the body is too far to the right as well. I simply need them all centered...

Help with linking remote to menu and title?

I have my DVD finished to be mastered. I have an opening animation, that leads to a main menu. Whatever submenu I am in, and I want to press the button on the remote to go back to the main menu, it takes me to the opening animation and I have to wait to get to the menu.
Any thoughts on how to link that?

First, hopefully having all your code mushed onto the same line is a copy/paste error, otherwise it should look like...
stop();
btn_recipe.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
     gotoAndStop(1, "Recipe");
If the intention is to click the buttons to make them work, then you should use CLICK instead of MOUSE_DOWN. MOUSE_DOWN can be a persistent state whereas CLICK involves releasing it afterwards.
As for the code to get you back home, where is it located on the timeline? Are you getting any error messages when you try to use it?
One thing you should learn to use is the trace() function. It is useful for troubleshooting. You can use it now to see if your second button is talking to the function at all...
stop();
btn_home.addEventListener(MouseEvent.CLICK, mouse5DownHandler);
function mouse5DownHandler(event:MouseEvent):void {
     trace("the button works okay");
     gotoAndPlay(1, "MainMenu");
If you don't get that message in the output panel, you'll know the button is not properly coded to work.
Most folks here will recommend you get away from using scenes in a design that includes navigation--they have a history of being problematic. Instead of using scenes, divide the one main timeline up into sections or use movieclips for the sections and manage their visibility... or do a bit of both.

Links from 2nd vertical menu appear in submenu of 1st vertical menu

http://www.westhoustonairport.com/index_troubleshoot.shtml - Problem occurs in IE
I have five vertical Spry menus. Some of the menus have submenus. Go to PHOTO COLLECTION first, and the submenu looks good. Then go to either HANGARS / OFFICES or HISTORY in the third vertical menu, and you'll see that the submenus contain links from the fourth vertical menu.
As a temporary fix, I switched PHOTO COLLECTION (which has a submenu) with ON-AIRPORT BUSINESSES (no submenu), which you can see here:
http://www.westhoustonairport.com. There is no problem now because the fourth column no longer contains links with submenus.
I, however, need to change the links back to the previous order. What is causing the links to appear in the previous column's submenu? Thank you.

The following is where you should specify the menu items background color
ul.MenuBarVertical a
     display: block;
     cursor: pointer;
     /*background-color: #000ECE;*/
     padding: 0.5em 0.95em;
     /*color: #333;*/
     color: #FFF;
     text-decoration: none;
The browser and I do not understand the following style rule
ul.MenuBarVertical a.MenuBarItemSubmenu
     /*background-image: url(SpryMenuBarRight.gif);*/
     background-image: url(SpryMenuBarRightHover.gif);
     background-repeat: no-repeat;
     background-position: 95% 50%;
     display:!important;
Gramps

How do I get the same song to play on the main menu and during scene select

I would like the music to play continuously throught the menu and scene selection. As it is I have to drag the audio file into each scene selection, and the music starts at the beginning.
At least, is there a way to remove the awful sound track that iDVD has on the themes?
iMac 20 core Duo Mac OS X (10.4.8)

Yes I can add audio, how do I get the same song to play throughout the chapter menus? I have 30 "chapters", which are scenes from an hour of home movie. Can the same song play continuously throughout the different chater menus?. As it is now, I have to drag an audio file into every submenu, and it starts the song at the beginning for each chapter menu.
Otherwise, that same song that is preloaded on the theme is played. I hope this makes sence, kind of hard to explain. Thanks

Horizontal menu and horizontal submenu

Similar Messages

Maybe you are looking for