XHTML+CSS应用教程——CSS实现文字的双影

ul,li{list-style-type: none;}#nav li{ float:left; margin-left:30px;}#nav span{display:none;}#nav a{font-size:12px;font-weight: bold;text-decoration: none; display:block;}#nav a:hover{ top:1px; left:1px; position:relative;}#nav a:hover span{ display:block; top:-3px; left:-3px; position:absolute; color:FF3300;}

<style  type="text/css">

ul,li{list-style-type: none;}

#nav li{ float:left; margin-left:30px;}

#nav span{display:none;}

#nav a{font-size:12px;font-weight: bold;text-decoration: none; display:block;}

#nav a:hover{ top:1px; left:1px; position:relative;}

#nav a:hover span{ display:block; top:-3px; left:-3px; position:absolute; color:FF3300;}

</style>
……
<div id="nav">

<ul>

<li><a href="http://wuyisky.cnblogs.com/">菜鸟吧<span>菜鸟吧</span></a></li>

</ul>

</div>

菜鸟吧菜鸟吧