<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">.outer {float:left;width:200px}.container { position:relative; width:200px; border:1px solid #000; text-align:center;}.test1,.test2 { margin-top:145px; width:200px; text-align::center;}.block1,.block2 { display:block; position:absolute; width:200px; height:15px; background:#CCC;}.block1 { top:120px; left:0px;}.block2 { top:5px; left:0px; width:155px; height:102px;}.test1 a span.block2 {border:1px solid #fff}.test1 a {border:1px solid #fff;background:#fff}.test1 a:hover {color:red;background:#fffffc}.test1 a:hover span.block1 {background:orange;}.test1 a:hover span.block2 {border:1px solid green;}.test2 a span.block2 {border:1px solid #fff}.test2 a {border:1px solid #fff;background:#fff}.test2 a:hover {color:green;background:#fffffc}.test2 a:hover span.block1 {background:green;}.test2 a:hover span.block2 {border:1px solid blue;}</style></head><body><div class="outer"> <div class="container"> <div class="test1"> <p><a href="#">Some Link Text<span class="block1"></span> <span class="block2"></span></a></p> </div> </div></div><div class="outer"> <div class="container"> <div class="test2"> <p><a href="#">Some Link Text<span class="block1"></span> <span class="block2"></span></a></p> </div> </div></div><div class="outer"> <div class="container"> <div class="test1"> <p><a href="#">Some Link Text<span class="block1"></span> <span class="block2"></span></a></p> </div> </div></div></body></html>
