Problem with CSS dropdown menu

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I found a css only drop down menu somewhere that I significantly
modified but am encountering a problem with the way part of it
functions.  A stripped-down version with all the html and css is here:

At the top of the page is a description of the problems and is repeated

1) The arrows and their positioning in the "D" section seem to move
down and bunch up when there are more than about 4 entries in the "A"
section at the 4th level.

2)When the mouse is over the "D2" box, the "D3" level box pops up but
the arrow is way down low on the display.

3)All of the boxes down to the "4" level should have arrows. At the
"1" level the arrow points down. At levels "2" through "4" the arrows
point right. At level "5" there are no arrows.

I believe the problem is due to accumulation of the vertical offsets
but have no idea where or why it is happening.

The Frosted Flake
+------------------------ SPAM is for eating ------------------------+

Re: Problem with CSS dropdown menu

Quoted text here. Click to load it

Can't help you with your problem at this point (too bloody busy*) but have
you looked at this with IE? The arrows *do* work but you have z-index
issues. IE7 that is. IE6 refuses to even consider it, as usual, but it does
not degrade gracefully. The z-index issues are IIRC usually to do with the
containing element having a lower z-index than the dropdown element. Yep,
oddly enough, the containing element. IE establishes a new rendering context
differently to the other browsers.

And, IMHO more then one level of dropdown is too much.

* I would have to download your example and fiddle with the code. Even
firebug is a pain to use with these things.

Re: Problem with CSS dropdown menu

Frosted Flake wrote:
Quoted text here. Click to load it

I use css menus (and lots of other neat stuff) I get from
positioniseverything. Use that as a starting point, and then make
incremental changes to get what you want......if you follow that
approach, the first occurrence of trouble is usually the last change you
made, which makes it easier to debug.

You can make those menus work for all IE versions
(including IEsicks) with conditional header statements,
that only IE recognizes.

<!--[if lt IE 7]> <style type="text/css">
             behavior: url(sidepages/;

...and similar ifs for [if eq IE7]

If it works in Firefox it usually works in Safari too, and
surprisingly, IE8 as well. IE6 and IE7 always seem to need
a few special hacks. Chrome? I'd better start testing for that too.

Others would argue javascript is better (for making menus).....combined
with a static sitemap for the search engines, who can't read javascript
generated links.

Site Timeline