Hiding list menu for accessibility

Even though it is an accessibility problem, I think it can be solved with css, am just not sure how.

I have a roll over image map, that I am wanting to navigate with tab. Is their a way to ‘hide’ this behind the map, without it interfering?

This is what I have done so far. http://loveleecreations.com/testsite/region12/
I thought I could do it the same way the h1 is hidden behind the header, but obviously there are some large gaps in my understanding, as that didn’t work.

The corresponding html code :

<div id="nav-map">
      <img src="images/map-region.jpg" alt="Toastmasters Region 12" width="400" height="340" usemap="#map" id="image-map" title="" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()"  border="0" />
      <map name="map">
        <area shape="poly" coords="302,332,323,292,336,284,350,266,358,252,352,226,351,209,382,239,396,246,389,278,351,309,325,347,312,340" href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand" class="72" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()" />
        <area shape="rect" coords="301,68,400,89" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" class="73" onmouseover="MM_swapImage('image-map','','images/map-region-73.jpg',1)" onmouseout="MM_swapImgRestore()" />
        <area shape="rect" coords="301,44,400,66" href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand" class="72" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()" />
        <area shape="rect" coords="301,21,399,42" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" class="70" onmouseover="MM_swapImage('image-map','','images/map-region-70.jpg',1)" onmouseout="MM_swapImgRestore()" />
        <area shape="rect" coords="301,-2,400,20" href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" class="69" onmouseover="MM_swapImage('image-map','','images/map-region-69.jpg',1)" onmouseout="MM_swapImgRestore()" />
        <area shape="poly" coords="297,232,297,206,251,210,207,210,205,254,216,260,234,272,258,275,270,289,280,256" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" class="70" onmouseover="MM_swapImage('image-map','','images/map-region-70.jpg',1)" onmouseout="MM_swapImgRestore()" />
        <area shape="poly" coords="113,93,112,186,206,187,208,210,276,206,296,205,296,180,248,120,232,84,222,65,228,52,231,37,251,56,280,62,260,26,247,15,209,-2,203,15,205,41,205,49,212,65,202,117,163,93,167,74,151,67,136,68,117,81"  href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" class="69" onmouseover="MM_swapImage('image-map','','images/map-region-69.jpg',1)" onmouseout="MM_swapImgRestore()"  />
        <area shape="poly" coords="112,97,101,83,86,99,64,116,-4,159,-2,204,11,264,63,263,110,244,136,241,179,267,208,290,236,293,237,315,250,329,269,289,256,275,236,275,206,254,205,203,207,185,114,188,111,98" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" class="73" onmouseover="MM_swapImage('image-map','','images/map-region-73.jpg',1)" onmouseout="MM_swapImgRestore()" />
      </map>
     <ul id="access">Toastmasters Australia Regions
    <li> <a href="http://www.toastmastersd69.org" target="_blank" class="hidden"><span>Distric 69 - District 69 | Queensland, Northern Territory, Papua New Guinea</span></a></li>
    <li><a href="http://www.d73.toastmasters.org.au/" target="_blank" class="hidden">District 73 | Western Australia, South Australia, Victoria, Tasmania</a></li>
    <li><a href="http://www.toastmasters.org.nz/" target="_blank" class="hidden">District 72 | New Zealand</a></li>
    <li><a href="http://www.d70toastmasters.org/" target="_blank" class="hidden">District 70 | New South Wales, Australia Capital Territory</a></li>
    </ul>
   
</div>

The corresponding CSS

#nav-map {
float:right;
width:400px;
padding:5px;
}


ul, ul span {
				height: 250px;
				width: 300px;
			}
				ul span {
					display: block;
				/*	margin-bottom: -160px;*/
					position: relative;
					z-index: 1;
				}
				
				#nav-map ul {
	position: absolute;
	top: 300px;
	margin-left: 0px;
				}

Thanks for reading!

Lee

You COULD give the tab a negative z-index to have it slide under yes?