Solved

Spry Menu Submenu's appear to the right

Posted on 2007-12-04
10
1,385 Views
Last Modified: 2009-12-16
I have a site where I created a Spry horizontal menu.   In order to get some clarity, I made:

ul.MenuBarHorizontal li text-align to "center".

However, when I do that, the right part of the submenu opens in the center as well - I need it to open directly under the top level cell, not off center.

How do I do this?
@charset "UTF-8";
 
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
	margin: 0;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	text-align: left;
	position: relative;
	cursor: pointer;
	width: 7.4em;
	float: left;
}
ul.MenuBarHorizontal2 li
{
	text-align: 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;
	
}
ul.MenuBarHorizontal li
{
	border: 1px solid #CCC;
}
 
ul.MenuBarHorizontal2 li
{
	border: 0px;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #0081C0;
	padding: 0.4em 0.9em;
	color: #FFF;
	font: bold 11px/11px arial, helvetica, sans-serif;
	text-decoration: none;
}
ul.MenuBarHorizontal2 a
{
	display: block;
	cursor: pointer;
	background-color: #FFFFFF;
	padding: 0.3em 0.9em;
	color: #000000;
	font: bold 11px/11px arial, helvetica, sans-serif;
	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: #0081C0;
	color: #800040;
}
 
/* 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: #0081C0;
	color: #800040;
}
 
 
/*******************************************************************************
 
 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;
}
/* 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;
	}
}

Open in new window

0
Comment
Question by:mmatzko
  • 5
  • 5
10 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20409516
Hi mmatzko,

Can you post a link to a page that has the undesired effect?  I just tried creating a menu bar and changed the text align as you specify and all that I see is that the text centered...
0
 

Author Comment

by:mmatzko
ID: 20411559
Do your submenu's come down directly below the top cell?

Here is a link to our test site - you can see how the text is centered on the top level, the text is left on the sub menu's however it drops down in the center of the top level.

http://www.codingplus.biz

0
 

Author Comment

by:mmatzko
ID: 20411561
Do your submenu's come down directly below the top cell?

Here is a link to our test site - you can see how the text is centered on the top level, the text is left on the sub menu's however it drops down in the center of the top level.

http://www.codingplus.biz

0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20414111
Okay, I only see the problem in IE 7.  Firefox looks fine.  This is not going to be easy to figure out...
0
 

Author Comment

by:mmatzko
ID: 20415729
Agreed - I noticed that later today.    I think it might have something to do with the IE hack it the bottom of the spry CSS.  

0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20490067
Did you fix it?  I started taking a look at it again tonight and your site doesn't do the same thing.
0
 

Author Comment

by:mmatzko
ID: 20492466
I didn't fix it.   Since we are ready to update production, I had to settle for putting the top level aligned Left - then it works.  

what doesn't work is if the top level is Center and the sub menu's are Left .  I'm still hoping for an answer on that one - it is apparently an IE 7 thing - a lot of the CSS sites which have horizontal menu's only support IE6 . . and there are a lot of people with similar problems - although it doesn't appear to be a Spry thing.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20494179
No, it isn't the spry part, it is the CSS.

For what it's worth, I created a test page using the CSS you posted originally and it appeared to work fine in IE 7...
0
 

Author Comment

by:mmatzko
ID: 20495613
Hmmm. . .so it may be something else in the page - maybe something to do with a width element.  I'll take a look and post it if I find anything.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 20496589
Or it could be an interaction between the existing style and the spry styles...
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question