Fixed top/sidebar with vertical pop-up menus

I am attempting to combine the vertical list menu found here (http://www.javascriptkit.com/script/script2/verticalmenu.shtml) with the fixed left sidebar and topbar found here (http://www.dynamicdrive.com/style/layouts/item/css-left-and-top-frames-layout/). It almost works. It works in IE7 but fails in every other browser I've tried (IE6, Firefox, and Opera 7 under Linux).

Essentially what happens is when you hover over the vertical menu that is in the left fixed sidebar, the menu pops up but it is transparent so it you can see the content on the page behind it--and when you move the mouse over that popped-up area of the menu, the menu closes. This seems to be because the popped-up area of the menu is actually over the content area of the page.

An example of the behavior can be seen at: http://www.craigsteiner.us/test/index2.php

The component files are obviously index2.php itself and http://www.craigsteiner.us/test/test.css (along with http://www.craigsteiner.us/test/scripts/cssverticalmenu.js, but this JavaScript file is just taken directly from this site as a component of the vertical menu).

I've found that the problem of the menu can be fixed by removing the boldface line from the following segment of the test.css:

#maincontent{
position: fixed; /* THIS IS WHAT CAUSES PROBLEM WITH THE MENU */
left: 120px; /*Set left value to WidthOfLeftFrameDiv*/
top: 72px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
}


Of course, removing that line breaks the non-scrolling top/left sidebar aspect of the page. But it seems the vertical menu is being affected by the "Position: fixed" in another area of the page.

Does anyone have any idea what I'm doing wrong? Thanks in advance!

could you set the maincontent to a z-index of 1 and keep it at lowest priority?

Thanks, good idea. I added a "z-index: 1" to the #maincontent and a "z-index: 5" to the pop-up menu. The popped-up menu option is no longer transparent so you can't see the content behind it when it pops up, but mousing over it still causes the menu to close before you can click one of the popped-up options.

I've updated http://www.craigsteiner.us/test/index2.php to reflect the z-index change.

Thanks, it's progress!

is the menu powered by javascript and just styled by CSS, or is it both?

I wonder if using a doctype and some valid code might help things a bit? :p This effect can be done with pure CSS very nicely... check out CSS Play (http://www.cssplay.co.uk/menus/flyoutt.html) for an example of this

I got the vertical menu from this page: http://www.javascriptkit.com/script/script2/verticalmenu.shtml

It appears to use JavaScript on page load to do some initial prepping, but it appears to me that the menu itself is all CSS when it comes to actual operation.

I wonder if using a doctype and some valid code might help things a bit? :p This effect can be done with pure CSS very nicely... check out CSS Play (http://www.cssplay.co.uk/menus/flyoutt.html) for an example of this

Thanks, I'll give that implementation a try and see if I have better results.

yeah, the doctype would help to, but i know that i have seen something like this and it was because the user had an I-frame in the code and it acts as another page. I dont know if because you are going over the iframe and thats why it is causing this. Do you need the I-frame? Im not sure though if that is the problem!!

I tried the CSSPlay approach that was suggested and it works, thanks!

I prefer how the original menu I was looking looks, but this one works and without JavaScript so that is nice. I'll take a look and maybe I can make the CSSplay one look like the other.

Thanks for all your help!

Spoke too soon... it works great in IE7 and Firefox, but looks all messed up in IE6 given the non-scrolling layout of my page.

All of these things work great by themselves, it's just getting them to work within a left sidebar that doesn't scroll on a page that also has a top section that doesn't scroll. That seems to be confusing both of the menu approaches I've tried so far.

I haven't been able to get any of these working properly when used within my fixed left sidebar. All the menus work in IE7/IE6/FF by themselves but when I put them in the fixed left sidebar, they seem to fail in at least one of the browsers--or all of them.

I'm looking for a way to have a fixed area at the top, a fixed left sidebar, and the main content area scroll normally. In the left sidebar I want a vertical pop-up menu that only needs to go one sub-level deep. I like the way the menu looks in http://www.craigsteiner.us/test/test11.php and would like to use this implementation if it would just work.

I ultimately didn't like the CSSPlay approach mentioned above because it has embedded IE hacks in the HTML and I'd prefer to limit the hacks to the CSS area. But even the CSSPlay approach could be tolerable if it worked in the context of my page. You can see how it fails in http://www.craigsteiner.us/test/test21.php .

Can anyone take a look at these links and see why it's not working? I'd be willing to pay someone to get one working, especially if it were the first of the two.

NOTE: I'd also be more than happy to consider some alternate way of implementing the fixed top and left sidebars if that's necessary to make one of these vertical menus work.

Thanks!

try this on # 21:

#framecontentLeft, #framecontentTop {
background-color:navy;
color:white;
height:100%;
left:0pt;
position:fixed;
top:0pt;
width:200px;
}

Thanks for the suggestion jlhaslip. I went ahead and tried that and made that test #22 at http://www.craigsteiner.us/test/test22.php but I don't observe any change in behavior.