CSS horizontal menu with vertical dropdowns

What I would like my menu to look like:
- solid border on top and bottom
- first-level menu items horizontal and centered
- first-level menu items equally spaced as opposed to same
widths
- second-level menu items vertical and on individual lines
What my menu actually looks like:
www.vicesbyproxy.com/staging/exp_menu_vert.html
What's wrong:
- border not on top & bottom
- second level wrapping within the width of the container
This CSS is much more complex than what I usually do. Any
help would be greatly appreciated.

The only way to go -
http://www.projectseven.com/products/menusystems/pmm/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"anubia" <[email protected]> wrote in
message
news:e5o4gk$28t$[email protected]..
> What I would like my menu to look like:
> - solid border on top and bottom
> - first-level menu items horizontal and centered
> - first-level menu items equally spaced as opposed to
same widths
> - second-level menu items vertical and on individual
lines
>
> What my menu actually looks like:
> www.vicesbyproxy.com/staging/exp_menu_vert.html
>
> What's wrong:
> - border not on top & bottom
> - second level wrapping within the width of the
container
>
> This CSS is much more complex than what I usually do.
Any help would be
> greatly appreciated.
>

Similar Messages

Spry horizontal menu becomes vertical menu

In IE my spry horizontal menu becomes vertical but is
stretched to the same width as the horizontal menu is suppose to
be? Any ideas?

If horizontal is turning vertical, I have a feeling what is happening is that when you publish it, it's not connected to any style sheet -- or you have the style sheets in the wrong order.
Remember, with CSS (Cascading Style Sheets) the last stylesheet trumps the earlier one. That's perfectly OK if there are no conflicts, but there may be some that can cause problems.
Thus, you'd be looking for:
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="navigation.css" rel="stylesheet" type="text/css">
If navigation.css is first, styles.css may be rewriting your styles for your spry navigation.
Now, I'm going to throw you a curve. Spry has been discontinued and it "going away." I recommend you learn how to make your own navigation and Spry is usually used for drop-down navigation. You can do that in straight HTML and CSS.
Take a look at my last reply in this forum discussion for a bunch of pretty cool "do it yourself" navigation tutorials.

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

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

CSS horizontal menu

Hi
Can anyone tell me how to make a horizontal menu, with a
background image. The same as the one at the top of this webpage.
I dont need a drop down menu for each item, just a basic
menu. I cant seem to position my background image correctly.
Thankyou

Let's see what you have so far. Can you post a link to the
page?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Mattastic" <[email protected]> wrote in
message
news:f7vnem$8a8$[email protected]..
> Hi
>
> Can anyone tell me how to make a horizontal menu, with a
background image.
> The
> same as the one at the top of this webpage.
>
> I dont need a drop down menu for each item, just a basic
menu. I cant seem
> to
> position my background image correctly.
>
> Thankyou
>

CSS Rollover Menu with Images and Current Page Indicator

Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !

I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Horizontal menu with horizontal sub menu using image rollovers or similar

Hello,
I am brand new to web design and working on my first site. What I lack in skills, I have in free time to learn right now : ) Please let me know if there is a tutorial or other resource that describes what I am trying to do...I've been searching for days and just can't find what I'm after.
The design concept is a menu of main categories that apear to be floating over an object. When you hover over one, it looks like it gets pressed down in space resulting in the next line populating with subcategories to be selected. If you click on the main elements, you would be directed to that page - Services for instance. If you just hovered over a main category, you would be presented with a list of sub-categories that behave in the same fashion. If you then clicked on one of the sub-categories, you would be taken to that specific page.
Here's a sequence of images that show what I'm after.
I built all this in Illustrator as described in a Lynda.com tutorial. I then exported slices to dreamweaver and started building content. Each of the categories and sub categories is a separate slice with images built for the rollovers. I was able to build the main categories and get them to visually sink upon using an imageswap...now I'm stuck on how to get the second line to behave as I described.
This is a fun learning experience. Let me know if there is a better way to achieve the design. I just stared investigating SSIs as well and see the value in having this menu in just one place, referenced into all my subsequent pages. I have successfully embeded an SSI footer with rollovers on my page, but this menu problem is really tough for me.
I really appreciate any pointers.
Thanks,
Jeff Prince

I tried building a Spry Horizontal menu to get what I want, but I had no success there. Any tips for that?
On a separate note...I do not know if it is proper to use a 'tabbed panel' for my menu project, but it seems to work fine. I have built both the top (main category) and bottom (sub category) lines of my menu using spry with .png image rollovers.
Now I just need to find out how to make the main category button rollover stay 'down' while browsing the subcategories. I would also like to get the subcategories to populate upon mouseover of the main category, without requiring a selection. Now that would be slick : ) In my example above, the 'services' title should be depressed while in that submenu and look like 'landscape design'.
One minor problem is the space created between my subcategory images. I can't find the .css or .js that is creating that space. I've really trimmed down all the .css and do not know where else to hunt.
Thanks for any advice,
Jeff

Spry Horizontal Menu is Vertical

I installed a Spry Horizontal Menu Bar on one of my clients
web pages and everything was going fine.
But then all of a sudden the horizontal menu switched to
vertical and I can't figure out how to undo this.
At this point even when I ask DW to insert a Spry horizontal
menu bar onto a new page, it inserts a vertical one!
Did I mess up the .css somehow?
Thanks!
Greg in New Orleans

Try making one on a fresh page. When you select the Spry
Menu, you are
asked if it's vertical or horizontal and then tells you it
will copy files
and you click okay.
Does your page use the SpryHorizontalMenu.css page? Could you
maybe be
using the wrong one?
If you still can't get it, could you post a link to your
page?
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"geeceeart" <[email protected]> wrote in
message
news:fno5i8$1i6$[email protected]..
>
> I installed a Spry Horizontal Menu Bar on one of my
clients web pages and
> everything was going fine.
> But then all of a sudden the horizontal menu switched to
vertical and I
> can't
> figure out how to undo this.
> At this point even when I ask DW to insert a Spry
horizontal menu bar onto
> a
> new page, it inserts a vertical one!
> Did I mess up the .css somehow?
> Thanks!
> Greg in New Orleans
>

How I do I create a horizontal menu with images as background?

Apple OSX.6.7
Dreamweaver CS 5.5
Template: 2 column fixed, left sidebar, header and footer
I have tried the spry horizontal menu available through the Insert panel in Dreamweaver 5.5. I thought I could set background images on the li elements, attaching via CSS and using IDs on each li. So far nothing is working especially well, and I'm fried.
What is the best way to create a horizontal menu when you want to use a background image? At this point, I'd be fine with using one image background and relying on the anchor pseudo classes for hover and active. The menu doesn't have to be an image rollover. It just has to enable me to keep the part of the banner image that descends into the menu area.
My goal is to do everything using CSS instead of resorting to a table for positioning the menu elements.
Thanks for your input.

Customizing Spry Menus
http://foundationphp.com/tutorials/sprymenu/customize1.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Horizontal menu with one top level having pages below.

I have reviewed the answer to a similar post and reviewed the settings as shown in the image. My problem is that I want this one menu item to display the pages vertically and not drop down, and display to the right. I have tried every way of setting the menu preferences I can think of and it refuses not to impact the menu as a whole. This includes unchecking the box that allows individual edits. Can someone provide me a text procedure step by step to make my one top level menu item display the pages dropped down vertically for selection as opposed to down and right? This is the latest version of Muse. The menu widget was created by allowing it to detect the pages the way they were set in design mode.

Ok just in case any other new users to muse have the same problem with a horizontal menu needing to have one of the top level links drop down a vertical menu below. Initally in plan view I had created the top level page, and all the other pages below stacked vertically. What I did to make it display the way I wanted is to delete the pages stacked vertically and place them on the same line horizontally. See below .....

Spry horizontal menu goes vertical in IE6

My site is still incomplete but I was testing the basic
layout on different browsers, and found that my horizontal Spry
menu bar at the bottom of the page goes vertical in IE6 (but not in
any other browser I tested). Any thoughts why this could be? The
page is
here.
On an unrelated note, the left sidebar does not reach all the
way to the footer in any browser that is not IE. 90% of my traffic
is from people using IE, but I'd like to fix it if possible. I
tried using a javascript workaround to making equal length columns
with CSS that I found on these forums, but could not get it to work
right across all browsers, so decided to just make fixed-length
side columns instead. Any help on either problem would be
appreciated!!

Have a look at the following piece of code in your modified CSS file
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    background-color: #000;
/* 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: none;
    background-color: #F00;
You have changed the latter two highlighted lines, which you must have done because you felt that you are an expert.
Sorry to disappoint, because the last highlighted line is where the problem lies. If you replace the f/loat value back to the original left, your problem will have disappeared.
Gramps

Sliding CSS horizontal menu

I'm really stumped. I need to make a horizontal DHTML menu
either showing or hiding text links based on mousing over items.
I've done this before with a vertical menu, but it's just not
working horizontally.
This is what I'm trying to achieve...
First menu loads: | Link One | | |
Mousing over the space past Link One will display the
following: | | Link Two | |
Mousing over the space past Link Two will display the
following: | | | Link Three |
I am so stumped!!! Does anyone know of a menu like this
anywhere on the web?
Thank you :)

I'm really stumped. I need to make a horizontal DHTML menu
either showing or hiding text links based on mousing over items.
I've done this before with a vertical menu, but it's just not
working horizontally.
This is what I'm trying to achieve...
First menu loads: | Link One | | |
Mousing over the space past Link One will display the
following: | | Link Two | |
Mousing over the space past Link Two will display the
following: | | | Link Three |
I am so stumped!!! Does anyone know of a menu like this
anywhere on the web?
Thank you :)

IWeb 08: Static horizontal menu with background image

Hi
I want to make a static horizonal menu bar. I want to have a 800px x 40px black bar that has a background image from the same size. The reason of a background image is because I want a logo to be in that menu. I have searched in google for samples but I haven´t been able to find one that is simple and that I can incorporate the logo in the background. Can somebody tell me a link to a place to get this or tell me a code ? I don´t know html thou
thank you in advance

Don't really understand exactly what you are asking here? Why do you need any code to create a menu bar? You can do this very easily in iWeb.
To create a menu bar:
1. Open your page in iWeb and then open the Inspector and go to Page and click on 'Hide from menu' and 'Don't include in menu and this will turn off the iWeb built in template navigation menu.
2. To create your own menu bar, simply use either a text box or a shape and make it 800px by 40px and then place it on your page where you want your nav menu to be and type in your links and then hyperlink them to your pages by opening the Inspector and opening Hyperlink - 2nd from the end and then highlighting the text and linking to relevant pages and then setting the colours via the format link.
Don't quite understand why you want a background image in a nav menu? It will be very hard to get anything of those sizings and people do not usually have a background image in a nav menu - normally a colour. A nav menu is not the place for background images or logos - it is too small and all this should be in your header section instead.
If you want more help, then please be precise about what you are asking.

Spry Horizontal Menu - Need Submenu HELP!

Using DW CS3 - Spry v. 1.6.1
I've created a horizontal menu with drop down submenus. After
many hours, I finally figured out how to change the background of
the main menu items, but cannot for the life of me figure out how
to style the submenus without screwing up the main menu. I'm a
newbie to CSS and Spry and am very confused by some of the class
designations used in the style sheet.
If you can just tell me what in the stylesheet to change I
will forever grateful!
Thanks!
ps - If you're an Adobe person reading this, I found the
comments to not be very helpful, they're a bit confusing for new
users....

Simply, your menu list items are too wide (altogether) to fit on the same line.
I see that you have defined your div#container as 1000px, and your div#nav_bar as, well, it will default to 1000px. Then you have set your MenuBar to 80% of that width, and your list items as 16.8% of that.
So far, everything is flexible.
When you get down to ul.MenuBarHorizontal a, however, you have set padding: padding: 0.5em 0.75em; If you change your padding units to percentages, you should be able to find acceptable measures that will allow your list items to remain on one line.
Keep in mind that, as the following references notes, in some browsers padding is measured in addition to the stated width of your element:
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
So make sure ALL your percentages add to 100%...including the horizontal padding (for both sides!) and the width (don't add in the vertical padding...that could be left as is). Actually, add them up to slightly less than 100% for comfort. If you get a gap at the end of the menubar, center the menubar and apply a background to the containing div.
Beth

Spry Horizontal Menu List Items crash IE6 browser

****Update*****
Apparently, it was width:100%; set on each hover over
background color for the list items in our default stylesheet that
was causing IE6 to crash.
Menus are in working order in all browsers now!
We have integrated the Spry Horizontal Menu with a website,
and added custom styling to SpryMenuBarHorizontal.css. The menu
works in Mozilla, Safari, and IE7. However, in IE6, after hovering
over the navigation, the drop down menu appears, but, as soon as
you move your mouse into the drop down to select an item from the
list, IE6 crashes. Every time. Various Computers.
We have tried reverting to the original
SpryMenuBarHorizontal.css file, however, the same problem occurs.
We haven't made any changes to the original js file
(SpryMenuBar.js).
Has anyone ever experienced this issue?
Here is our customized CSS:
@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
img#nfl {
background-image:url(/Images/slices/nfl.png);
background-repeat:no-repeat;
height:14px;
width:40px;
margin:7px auto auto 25px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nfl.png");
_background-repeat:no-repeat;
_background-image:none;
img#mlb {
background-image:url(/Images/slices/mlb.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px 20px auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/mlb.png");
_background-repeat:no-repeat;
_background-image:none;
img#milb {
background-image:url(/Images/slices/milb.png);
background-repeat:no-repeat;
height:14px;
width:112px;
margin:7px auto auto auto;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/milb.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto -10px;
img#ctown {
background-image:url(/Images/slices/ctown.png);
background-repeat:no-repeat;
height:14px;
width:114px;
margin:7px auto auto 50px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ctown.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 40px;
img#nba {
background-image:url(/Images/slices/nba.png);
background-repeat:no-repeat;
height:14px;
width:43px;
margin:7px auto auto 100px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nba.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 70px;
img#nhl {
background-image:url(/Images/slices/nhl.png);
background-repeat:no-repeat;
height:14px;
width:41px;
margin:7px auto auto 90px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/nhl.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:margin:7px auto auto 100px;
img#ncaa {
background-image:url(/Images/slices/ncaa.png);
background-repeat:no-repeat;
height:14px;
width:52px;
margin:7px auto auto 70px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale src="/Images/slices/ncaa.png");
_background-repeat:no-repeat;
_background-image:none;
_margin:7px auto auto 60px;
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
cursor: default;
width:950px;
height:32px;
background-image:url(/Images/slices/primaryNavSlice.png);
background-repeat:repeat-x;
margin:0px;
padding:0px;
vertical-align:middle;
border-bottom:1px solid #000;
/* 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: 0px;
padding: 0px;
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: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
/*width: 8.2em;*/
width:auto;
position: absolute;
left: -1000em; /* without this all menus are visible without
hover */
/* 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; /* without this menus don't show up */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/*width: 8.2em;*/
width:auto;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.15em 0.15em;
text-decoration: none;
ul#teamsMenu table#teams {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:11px;
width:500px;
background-color:#fff!important;
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;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
To center the tables in the screen
li.nfl_list #teams.nfl_table {
position:absolute;
top:7px;
li.mlb_list #teams.mlb_table {
position:absolute;
top:7px;
li.milb_list #teams.milb_table {
position:absolute;
left:-80px;
top:7px;
li.ctown_list #teams.ctown_table {
position:absolute;
top:7px;
li.nba_list #teams.nba_table {
position:absolute;
left:-200px;
top:7px;
li.nhl_list #teams.nhl_table {
position:absolute;
left:-190px;
top:7px;
li.ncaa_list #teams.ncaa_table {
position:absolute;
left:-590px;
top:7px;
}

I am having the same problems in IE7. I'm using the latest
version of everything (Spry 1.6.1 and javascript file version 0.12)
and at first I was having the problem on my drop down menus
appearing horizontal with all the correct styles but when I changed
the rule ul.MenuBarHorizontal ul to position: relative; the drop
downs appear vertical now but I have no beige border around the
whole ul anymore and I'm getting white space inbetween list items.
http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
so if anyone has any advice I'd much appreciate it. Also i'm
using 1px width on my borders no decimals.

CSS horizontal menu with vertical dropdowns

Similar Messages

Maybe you are looking for