1 .

<!--StartFragment--><style type="text/css">
.demo a {
float:left;
margin:5px 1px 0 1px;
width:20px;
height:20px;
color:#999;
font:12px/20px 宋体;
text-align:center;
text-decoration:none;
border:1px solid orange;
}
.demo a:hover {
position:relative;
margin:0 -9px 0 -9px;
padding:0 5px;
width:30px;
height:30px;
font:bold 16px/30px 宋体;
color:#000;
border:1px solid black;
background:#eee;
}
</style>
<div class="demo">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>

=------------------------------------------------------------------------------------------------------------------------------

2,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl {
   position:absolute;width:240px;height:170px;border:10px solid #eee;
}
dd {
   margin:0;width:240px;height:170px;overflow:hidden;
}
img {
    border:1px solid black
   }

dt {
   position:absolute;right:3px;top:50px;
   }
a {
     display:block;margin:1px;width:20px;height:20px;text-align:center;font:700 12px/20px "宋体",sans-serif;color:#fff;text-decoration:none;background:#666;border:1px solid #fff;filter:alpha(opacity=40);opacity:.4;
   }
   a:hover {background:#000}
</style></head>
<body>
    <dl><dt><a href="#a" title="">1</a>
            <a href="#b" title="">2</a>
            <a href="#c" title="">3</a>
        </dt>
    <dd><img src="img2/1.jpg" alt="" title="" id="a" />
        <img src="img2/2.jpg" alt="" title="" id="b" />
        <img src="img2/3.jpg" alt="" title="" id="c" />
    </dd>
</dl></body></html>

--------------------------------------------------------------------------------------------------------------------------

3.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl {position:absolute;width:240px;height:170px;border:10px solid #eee;}
dd {margin:0;width:240px;height:170px;overflow:hidden;}
dt {position:absolute;right:1px;}
ul {margin:0;padding:0;width:260px;height:170px;list-style:none;background:url("img2/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;border:1px solid #ccc}
#b {background-position:75% center}
#c {background-position:75% 86%}
li {width:205px;height:27px;font:12px/27px "宋体",sans-serif;white-space:nowrap;overflow:hidden;}
dt a {display:block;margin:1px;width:30px;height:56px;text-align:center;font:700 12px/55px "宋体",sans-serif;color:#fff;text-decoration:none;background:#666;}
dt a:hover {background:orange}

</style>

<head/>
<body><dl><dt><a href="#a" title="">新闻</a>
                <a href="#b" title="">娱乐</a>
                <a href="#c" title="">体育</a>
            </dt>
          <dd><ul id="a">
                <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
                <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
                <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
                <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
                <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
                <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
              </ul>
              <ul id="b">
                 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
                 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
                 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
                 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
                 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
                 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
               </ul>
              <ul id="c">
                 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
                 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
                 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
                 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
                 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
                 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
    </ul></dd></dl></body></html>
-------------------------------------------------------------------------------------------------------------------------