FF and IE menu overlay issue

If you use visibility combine it with a z-index change. Beware that can get complex, as you need to alter the z-index at the level where the two conflicting elements have ancestors which are siblings.

The gold standard for vertical dropdown menus is suckerfish. If you hover over the third menu item "Gobioidei" you'll notice the dropdown covers some links in the text. When the submenu isn't there the links are clickable.

It uses alterations to the left offset value of the submenu to hide/show the submenu.

I saw that article about suckerfish, but it doesn't use images like have to use. Is there a way to do the suckerfish method and use images?

I shouldn't think using images would make any difference. The appear/disappear styles are on the <ul> element. What you do with the <li> or <a> elements is up to you.

I sure would like to see an example in action using images that have rollovers, or if you rollover it swaps an image out elsewhere on the page like here: http://dev.kleidon.com/portfolio_home.asp

I'm not sure what the images on the other part of the page have to do with this - thats handled by javascript. The grid_image is separate from the menu. There is nothing to stop you attaching the same javascript to the same menu item in a suckerfish menu (or any other menu).

aside from the grid image, I don't see how to get the rollover in the menu to work for each menu item. I'm just having a hard time understanding all of this.

ok, here is what I have done, I made a test page so I can learn how to do this http://dev.kleidon.com/test.htm

The only issue I have is the space between the rollovers. How do I correct that?

You're still using visibility: hidden?

Control the margins and padding on the li element. There will be some default margin.

What should I use in lue of visibility:hidden? If I don't call this out the menu is always visible.

I tried fixing the spacing but it's not working. Can you help?

As I mentioned, right back at the top, Suckerfish uses offset left.

hidden: left: -9999px;
not hidden: left: 0;

I was looking at the source code for the suckerfish link you posted and I don't see those values anywhere on page I even did a search for them.

I tried your suggestion but I must not be doing something right.

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#scaffolding a {
text-decoration: none;
text-indent: -999em;
display: block;
height: 70px;
background: url(/images/hdlogo_flip2.gif) no-repeat;
background-position: 181px 0;
}

sorry... I trying to learn all this stuff, I was literally looking for the verbage

hidden: left: -9999px;
not hidden: left: 0;

if you would have said:
text-indent: -999em;
left: -999em;

I might have caught on to what you were wanting me to see.

Now that I see it, I still don't know how to use it. :oops:

I am not having any luck, I am not sure what to do! :?

maybe I'll try somewhere else.

ok, I made some progress and got this working in FF but I am having trouble getting my menu items to correctly space themselves on IE.

Any suggestions