Using Sitepointe's Pure CSS Off-Screen Navigation Menu - Browsers supported: IE9+, Firefox 3.5+, Chrome any, Safari 3.2+, Opera 9.5+

This navigation trick presents serious accessibility issues:

It also may present some exepectation conflict-y issues

SAMPLER

Thank you for using GetSimple CMS. This is your homepage, so please change this text to be what you want.

Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec this is code venenatis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vulputate pretium augue.

Header 3

#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}

Header 4

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Donec ut est risus, placerat venenatis augue
A blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut est risus, placerat venenatis augue. Link in BlockQuote Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

This patched look forces me to require everything be in

tags so that the P elements can be lifted up one layer in the Z-index. I hate that. Need a new way to make the patched look.

Currently thinking using CSS gradient backgrounds. SVG can apparently do many of the same things. Dunno if it is better to use. Obviously an actually image could be used but when stretched the stitches would not be even. 2 images (one with the horizontal and one with the vertical stitching would be needed.