Solved

Spry Menu Submenu's appear to the right

Posted on 2007-12-04
10
1,380 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now