PDA

View Full Version : Spry Submenu opens ontop of Menu


charlescpulliam
01-26-2011, 10:21 PM
Here is my test site: http://barbosa.startlogic.com/test/index.html

When I click on my horizontal spry menu, the submenu opens ontop rather than below in IE8.

Any help would be greatly appreciated! I am at a loss...

Thanks - Charles

charlescpulliam
01-27-2011, 06:03 PM
Here is the code for my problem with the submenu opening ontop of the menu:

ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
font-size: x-large;
cursor: default;
width: auto;
list-style-position: inherit;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: small;
position: relative;
text-align: left;
cursor: pointer;
width: 13.5em;
float: left;
height: auto;
color: #693;
background-color: #000;
font-family: "Times New Roman", Times, serif;
}

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;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}

ul.MenuBarHorizontal ul li
{
width: 13.5em;
}

ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #333;
padding: 0.0em 0em;
color: #FFF;
text-decoration: none;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #000;
color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #666;
color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}

@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
#menu {
font-family: Times New Roman, Times, serif;
}

DWcourse
01-28-2011, 02:44 AM
I'd recommend you start over. The CSS within your html document is a mess and you've applied some style classes to the list items in your menubar that aren't necessary.

And before you get started again read:

The Ten Commandments for Editing Dreamweaver’s Spry Menubars (http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php)

And then:

Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver (http://www.dwcourse.com/dreamweaver/spry-menu-bars.php)

charlescpulliam
02-10-2011, 02:31 PM
Thanks so much! It was a lot easier to create the menu over again and works perfectly now.

I appreciate your help!!