Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Spry Submenu opens ontop of Menu (http://www.dreamweaverclub.com/forum//showthread.php?t=38938)

charlescpulliam 01-26-2011 10:21 PM

Spry Submenu opens ontop of Menu
 
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:

Code:

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

And then:

Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver

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!!


All times are GMT. The time now is 01:01 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com