Solved

Spry Menu Submenu's appear to the right

Posted on 2007-12-04
10
1,389 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

635 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