Question

I’m building (kinda experimental) menu which is built on classic ‘ul li’ base except ‘a’ elements are set to display:block to enable precise positioning and sizing. some transform:rotate also appears, but this does’t influence following behaviour:

All browsers except webkit ones display all menu items here the same way (correctly). But webkit hides child items (‘item 2a’, ‘item 2b’, ‘item 3a’, …). The links are apparently present as cursor changes while hovering over the area where they should appear, but they are not visible. Oddly enough, when I set size of these invisible elements to slightly overlap their designated space (height of their parent LI) they appear visible (here)

Do you know what’s happening here?

Thanks.

Answer 1

Personally, I think negative margins and css rotation combined can be a bit of a pain.

If I was you I’d

1. Set the a.rotate links to absolute positioning, so they don’t upset the flow.
2. Dump the negative margins
3. Play with it a bit

I made this example here: http://jsfiddle.net/958qQ/
The rest should be easy.