PDA

View Full Version : vertical won't overlap div


RainForest
09-23-2013, 10:27 PM
Hello,

While I've been a low-level DW user for a few years now, I've never been quite able to make the spry menus work for me. I'm giving it another shot, and am pretty much getting a vertical spry menu in the left sidebar to look the way I want it to, with one exception - the submenus won't display over the edge of the sidebar into the main area of the page. I've Googled, but don't see a resolution for this. Can someone tell me what I might be missing?

gentleone
09-23-2013, 10:55 PM
probably some overlapping z-index or something, but without some code/link we can only guess.

RainForest
09-23-2013, 11:09 PM
Hi gentleone,

Here's the code, though I've messed it up while I've been working with it today. I changed the submenu position to 50% so I can at least see part of it.

I'm about ready to delete the menu and start fresh. It's a simple menu, with only one submenu level, which doesn't even need to link to anything. I just really want to figure out how to make it work the way I want!

It's just experimental at this point, but if I can't resolve the display issue, it will never go live.

One thing that would be really helpful would be to find a listing of exactly what each of the styles is responsible for controlling (my reference book, "The Missing Manual" only specifically lists six, and I haven't found such a listing online).

~~~~~~~~~~

ul.MenuBarVertical
{
margin: 0;
padding: 0px;
list-style-type: none;
font-size: 10px;
cursor: default;
width: 98%;
background-color: #cbd3cc;
border-top: 2px ridge #608d9a;
border-right: 2px ridge #142f0f;
border-bottom: 2px ridge #142f0f;
border-left: 2px ridge #608d9a;
color: #142f0f;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarVertical li
{
margin: 0;
padding: 0px;
list-style-type: none;
font-size: 10px;
position: relative;
text-align: left;
cursor: pointer;
width: 100%;
visibility: visible;
}

ul.MenuBarVertical ul
{
margin: 5% 0 0 50%;
padding: 0;
list-style-type: none;
font-size: 8px;
position: absolute;
z-index: 1020;
cursor: default;
width: 100%;
left: -1000em;
top: 0;
visibility: visible;
background-color: #cbd3cc;
color: #142f0f;
border: 1px solid #142f0f;
}

ul.MenuBarVertical ul li
{
width: 100%;
}

ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #cbd3cc;
padding: 0.5em 0.75em;
color: #142f0f;
text-decoration: none;
}

ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}

{
background-color: #97a8af;
color: #000;
}
ul.MenuBarVertical a.MenuBarSubMenuHover ul.MenuBarVertical a:hover{

}

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #97a8af;
color: #000;
}

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

@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #cbd3cc;
}
}

RainForest
09-24-2013, 11:34 PM
I've redone the code & posted a test page here: http://ow.ly/pbdK9. (It's the Meeting Schedule in the left sidebar.)

I never did get the pop-ups to cross over into the main div, so I made them small enough to fit in the sidebar, but now they're floating /way/ above their corresponding menu items. Why is this?

RainForest
10-23-2013, 05:17 PM
With about a month passing and hearing no responses to this question, I'm pulling the test page down for ease of site management, so link checking doesn't continue to return errors.

If anybody wants to look at the most recent code at a future date, I'll hold onto it for awhile...

krzy
10-27-2013, 08:21 PM
404 error..
maybe there is someone, who actually can help?