CSS-only Hierarchical Menus Test Bed
display:inline
- Header 1
- Subhead 1.1
- Subhead 1.1.1
- Subhead 1.1.2
- Subhead 1.1.3
- Subhead 1.2
- Subhead 1.3
- Subhead 1.4
- Header 2
- Subhead 2.1
- Subhead 2.2 **
- Subhead 2.2.1
- Subhead 2.2.2
- Subhead 2.2.3
- Subhead 2.2.4
- Subhead 2.3
- Subhead 2.4
- Subhead 2.5
- Subhead 2.6
- Header 3
- Subhead 3.1
- Subhead 3.2
- Subhead 3.3
- Subhead 3.4
- Subhead 3.4.1
- Subhead 3.4.2
- Subhead 3.4.3
- Safari(1.2) fails to draw some items, and fails to properly erase others.
- Safari(1.2.1) loses track of :hover when mousing over generated content (the ►). fixed in 1.2.2
- Firefox(0.8) does not allow generated content to be floated (the ►).
- Firefox(0.8) draws inconsistent spacing between subnav items (e.g. between 2.5 and 2.6).
display:inline-block
- Header 1
- Subhead 1.1
- Subhead 1.1.1
- Subhead 1.1.2
- Subhead 1.1.3
- Subhead 1.2
- Subhead 1.3
- Subhead 1.4
- Header 2
- Subhead 2.1
- Subhead 2.2 **
- Subhead 2.2.1
- Subhead 2.2.2
- Subhead 2.2.3
- Subhead 2.2.4
- Subhead 2.3
- Subhead 2.4
- Subhead 2.5
- Subhead 2.6
- Header 3
- Subhead 3.1
- Subhead 3.2
- Subhead 3.3
- Subhead 3.4
- Subhead 3.4.1
- Subhead 3.4.2
- Subhead 3.4.3
- Safari(1.2.1) loses track of :hover when mousing over generated content (the ►). fixed in 1.2.2
- Firefox(0.8) does not allow generated content to be floated (the ►).
- Mozilla(1.7) and Firefox(0.8) do not support
display:inline-block.
- Firefox(0.8) draws inconsistent spacing between subnav items (e.g. between 2.5 and 2.6).
display:table-cell
- Header 1
- Subhead 1.1
- Subhead 1.1.1
- Subhead 1.1.2
- Subhead 1.1.3
- Subhead 1.2
- Subhead 1.3
- Subhead 1.4
- Header 2
- Subhead 2.1
- Subhead 2.2 **
- Subhead 2.2.1
- Subhead 2.2.2
- Subhead 2.2.3
- Subhead 2.2.4
- Subhead 2.3
- Subhead 2.4
- Subhead 2.5
- Subhead 2.6
- Header 3
- Subhead 3.1
- Subhead 3.2
- Subhead 3.3
- Subhead 3.4
- Subhead 3.4.1
- Subhead 3.4.2
- Subhead 3.4.3
- In Safari(1.2) and Firefox(0.8), the menus are positioned relative to the body, not the header 'cell'.
- Safari(1.2) fails to draw the menus (which are positioned at the top); click on 'Header 1' to force it to draw.
- Safari(1.2.1) loses track of :hover when mousing over generated content (the ►). fixed in 1.2.2
- Firefox(0.8) does not allow generated content to be floated (the ►).
- Firefox(0.8) draws inconsistent spacing between subnav items (e.g. between 2.5 and 2.6).
display:block; float:left
- Header 1
- Subhead 1.1
- Subhead 1.1.1
- Subhead 1.1.2
- Subhead 1.1.3
- Subhead 1.2
- Subhead 1.3
- Subhead 1.4
- Header 2
- Subhead 2.1
- Subhead 2.2 **
- Subhead 2.2.1
- Subhead 2.2.2
- Subhead 2.2.3
- Subhead 2.2.4
- Subhead 2.3
- Subhead 2.4
- Subhead 2.5
- Subhead 2.6
- Header 3
- Subhead 3.1
- Subhead 3.2
- Subhead 3.3
- Subhead 3.4
- Subhead 3.4.1
- Subhead 3.4.2
- Subhead 3.4.3
- Safari(1.2.1) loses track of :hover when mousing over generated content (the ►). fixed in 1.2.2
- Firefox(0.8) does not allow generated content to be floated (the ►).
- Firefox(0.8) draws inconsistent spacing between subnav items (e.g. between 2.5 and 2.6).
- Firefox(0.8) Sometimes fails to draw the right border on the last menu item. (Part of its inconsistent spacing/redrawing).