I have just used a spry menu for a site that I have created and it
looks great on my Mac in Safari and Firefox, but when I go on my PC
the drop down menu (submenu) shifts to the top of the website instead
of acting as a drop down. I updated the spry menu to 1.6, but it still
doesn't work. The drop down is for the navbar and it is only for one of the areas of the site. If this helps I am using images in the navbar (mainly because I want to have a specific font to be used).
I have looked everywhere and have tried to get help through other forum and I have nothing right now. At this point, if I could figure out another way to get the drop down menu without using spry I would be happy too. The only thing is that I don't really want to use flash.
Thanks
-Victoria
Here is the css code:
CODE
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright © 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: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index
to accomodate IE rendering bug: [url=http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url]
*/
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;
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:;
}
/* Submenus should appear slightly overlapping to the right (95%) and
up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: 0% 0 0 25em;
}
/* 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: Opx solid #CCC;
}
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #260608;
padding: 0;
color: #260608;
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: #260608;
color: #260608;
}
/* 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: #260608;
color: #260608;
}
/
*******************************************************************************
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-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-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-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-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;
f\loat: left;
background: #260608;
}
}
| 