
<HTML>


<HEAD>


<TITLE>Testing CSS with Menus</TITLE>


<STYLE type="text/css">


#picture {width:600px; height:800px; background:url(sun.gif) no-repeat;}


#picture DD {position:absolute; padding:0; margin:0;}


#picture #region1 {left:220px; top:100px; z-index:20;}


#picture #region2 {left:230px; top:250px; z-index:20;}


#picture A#part1 {display:block; width:160px; height:120px; text-decoration:none; z-index:20;}


#picture A#part2 {display:block; width:160px; height:100px; text-decoration:none; z-index:20;}


#picture A#part1:hover, #picture A#part2:hover {border:2px solid #cc0;}


#picture A:hover SPAN {position:absolute; display:block; color:#000; width:330px; height:270px; line-height:1.8em; font-size:0.9em; text-align:justify;}


#picture A:hover SPAN {float:left; margin-right:1em; margin-bottom:0.5em; border:1px solid #000;}


#picture A EM {display:none;}


#picture A SPAN, #picture A:visited {display:none;}


#picture A#part1:hover SPAN {left:600px; top:-50px;}


#picture A#part2:hover SPAN {left:500px; top:-50px;}


#picture A#part1:hover EM {position:absolute; display:block; left:80px; top:50px; width:530px; height:1px; overflow:hidden; font-size:1px; background:#f00;}


#picture A#part2:hover EM {position:absolute; display:block; left:80px; top:50px; width:530px; height:1px; overflow:hidden; font-size:1px; background:#f00;}


A:link { color:blue }


A:visited { color:blue }


</STYLE>


</HEAD>


<BODY>


<DL id="picture">


<DD id="region1"><A href=#nogo id="part1" alt="Part One" title="This is Part One"><EM></EM>


<SPAN>


<UL>


  <LI><A href="page1.html">Link to Page One</A></LI>


  <LI><A href="page2.html">Link to Page Two</A></LI>


  <LI><A href="page3.html">Link to Page Three</A></LI>


  <LI><A href="page4.html">Link to Page Four</A></LI>


</UL>


</SPAN></A></DD>


<DD id="region2"><A href=#nogo id="part2" alt="Part Two" title="This is Part Two"><EM></EM><SPAN>Some text should be written here.</SPAN></A></DD>


</DL>


</BODY>


</HTML>